Skip to content

Commit bc02065

Browse files
stephannvstephannv
committed
Make generators compatible with importmaps
1 parent 12096c8 commit bc02065

4 files changed

Lines changed: 139 additions & 6 deletions

File tree

‎lib/generators/ruby_ui/component_generator.rb‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,11 @@ def copy_js_files
4343
copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name)
4444
end
4545

46-
say "Updating Stimulus controllers manifest"
47-
run "rake stimulus:manifest:update"
46+
# Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
47+
if !using_importmap?
48+
say "Updating Stimulus controllers manifest"
49+
run "rake stimulus:manifest:update"
50+
end
4851
end
4952

5053
def install_dependencies
@@ -90,20 +93,62 @@ def install_js_packages(js_packages)
9093
end
9194

9295
def install_js_package(package)
93-
if File.exist?(Rails.root.join("package-lock.json"))
94-
run "npm install #{package}"
95-
elsif File.exist?(Rails.root.join("yarn.lock"))
96+
if using_importmap?
97+
pin_with_importmap(package)
98+
elsif using_yarn?
9699
run "yarn add #{package}"
100+
elsif using_npm?
101+
run "npm install #{package}"
97102
else
98103
say "Could not detect the package manager, you need to install '#{package}' manually", :red
99104
end
100105
end
101106

107+
def pin_with_importmap(package)
108+
case package
109+
when "motion"
110+
pin_motion
111+
when "tippy.js"
112+
pin_tippy_js
113+
else
114+
run "bin/importmap pin #{package}"
115+
end
116+
end
117+
118+
def pin_motion
119+
say <<~TEXT
120+
WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
121+
TEXT
122+
123+
inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
124+
pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
125+
RUBY
126+
end
127+
128+
def pin_tippy_js
129+
say <<~TEXT
130+
WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
131+
TEXT
132+
133+
inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
134+
pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
135+
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
136+
RUBY
137+
end
138+
102139
def dependencies
103140
@dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
104141

105142
@dependencies[component_folder_name]
106143
end
144+
145+
def using_importmap?
146+
File.exist?(Rails.root.join("config/importmap.rb")) && File.exist?(Rails.root.join("bin/importmap"))
147+
end
148+
149+
def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
150+
151+
def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
107152
end
108153
end
109154
end

‎lib/generators/ruby_ui/install/install_generator.rb‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ def add_tailwind_css
5656

5757
def add_tailwind_config
5858
say "Adding RubyUI config to tailwind config"
59-
template "tailwind.config.js.erb", Rails.root.join("tailwind.config.js")
59+
60+
if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
61+
template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
62+
elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
63+
template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
64+
else
65+
say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
66+
end
6067
end
6168

6269
def add_ruby_ui_base

lib/generators/ruby_ui/install/templates/tailwind.config.js.erb renamed to lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb

File renamed without changes.

‎lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const defaultTheme = require('tailwindcss/defaultTheme')
2+
3+
module.exports = {
4+
content: [
5+
'./app/views/**/*.rb', // Phlex views
6+
'./app/components/**/*.rb', // Phlex components
7+
'./public/*.html',
8+
'./app/helpers/**/*.rb',
9+
'./app/javascript/**/*.js',
10+
'./app/views/**/*.{erb,haml,html,slim}'
11+
],
12+
darkMode: ["class"],
13+
theme: {
14+
container: {
15+
center: true,
16+
padding: "2rem",
17+
screens: {
18+
"2xl": "1400px",
19+
},
20+
},
21+
extend: {
22+
colors: {
23+
border: "hsl(var(--border))",
24+
input: "hsl(var(--input))",
25+
ring: "hsl(var(--ring))",
26+
background: "hsl(var(--background))",
27+
foreground: "hsl(var(--foreground))",
28+
primary: {
29+
DEFAULT: "hsl(var(--primary))",
30+
foreground: "hsl(var(--primary-foreground))",
31+
},
32+
secondary: {
33+
DEFAULT: "hsl(var(--secondary))",
34+
foreground: "hsl(var(--secondary-foreground))",
35+
},
36+
destructive: {
37+
DEFAULT: "hsl(var(--destructive))",
38+
foreground: "hsl(var(--destructive-foreground))",
39+
},
40+
muted: {
41+
DEFAULT: "hsl(var(--muted))",
42+
foreground: "hsl(var(--muted-foreground))",
43+
},
44+
accent: {
45+
DEFAULT: "hsl(var(--accent))",
46+
foreground: "hsl(var(--accent-foreground))",
47+
},
48+
popover: {
49+
DEFAULT: "hsl(var(--popover))",
50+
foreground: "hsl(var(--popover-foreground))",
51+
},
52+
card: {
53+
DEFAULT: "hsl(var(--card))",
54+
foreground: "hsl(var(--card-foreground))",
55+
},
56+
/* ruby_ui especific */
57+
warning: {
58+
DEFAULT: "hsl(var(--warning))",
59+
foreground: "hsl(var(--warning-foreground))",
60+
},
61+
success: {
62+
DEFAULT: "hsl(var(--success))",
63+
foreground: "hsl(var(--success-foreground))",
64+
},
65+
},
66+
borderRadius: {
67+
lg: `var(--radius)`,
68+
md: `calc(var(--radius) - 2px)`,
69+
sm: "calc(var(--radius) - 4px)",
70+
},
71+
fontFamily: {
72+
sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
73+
},
74+
},
75+
},
76+
plugins: [
77+
require('@tailwindcss/forms'),
78+
require('@tailwindcss/typography'),
79+
require('@tailwindcss/container-queries'),
80+
]
81+
}

0 commit comments

Comments
 (0)