sprockets-components 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +7 -7
- data/lib/sprockets/components/version.rb +1 -1
- data/lib/sprockets/components.rb +33 -16
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fcc4905cb5aea2b0a2c224d8028bae996a28c0c32402135f288b1e7993cf274e
|
4
|
+
data.tar.gz: c4c924d075a7a38352580379cdbd53103059f0ba7154d2603c5ad1f54e8e6b84
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6d2df568730a67d7fa0fbf2a3df57b3fb5578fb2c29d9ef8cff15581deb5ebf18efd2766712f87ddddf4bd0a74e3f3147eaae224e913be043217c9e320a52dbf
|
7
|
+
data.tar.gz: 3f9af25ccb71f54db2c8c58d733692c4a0ca8a6cdd22ac6cb0d17254694fbc6f2ccb754478342834bfe133b526f1cc8822c07a3059b27dc46d03c03ab5e2601b
|
data/README.md
CHANGED
@@ -14,21 +14,21 @@ Use one directory per component, under `app/assets/components`:
|
|
14
14
|
app/assets/
|
15
15
|
└── components
|
16
16
|
└── my-counter
|
17
|
-
├── index.js
|
18
17
|
├── my-counter.js
|
19
18
|
├── my-counter.scss
|
20
19
|
└── my-counter.slim
|
21
20
|
```
|
22
21
|
|
23
|
-
|
22
|
+
At the top of the main my-counter.js component file, add the `component` directive:
|
24
23
|
```js
|
25
|
-
//= component
|
26
|
-
```
|
24
|
+
//= component
|
27
25
|
|
28
|
-
|
29
|
-
|
30
|
-
|
26
|
+
customElements.define("my-counter", class extends HTMLElement {
|
27
|
+
// ...
|
28
|
+
})
|
29
|
+
```
|
31
30
|
|
31
|
+
This directive exposes an `HTML` variable for use in the component. It is a string of the compiled template, with the compiled CSS inlined into an interior <style> tag.
|
32
32
|
|
33
33
|
Use the component in your views, as you'd expect. Sprockets compiles it all down to a single compiled js file. This file can be included directly, or `//= require`d into other files, or exposed to the importmap, or whatever you want!
|
34
34
|
```html.erb
|
data/lib/sprockets/components.rb
CHANGED
@@ -10,16 +10,45 @@ module Sprockets
|
|
10
10
|
app.config.assets.configure do |env|
|
11
11
|
env.register_pipeline :component, Pipeline.new
|
12
12
|
end
|
13
|
+
|
14
|
+
# there isn't a supported way to register path resolvers so we have to hack it in
|
15
|
+
Sprockets::Resolve.prepend Module.new {
|
16
|
+
def resolve_under_paths(*)
|
17
|
+
@resolvers ||= [
|
18
|
+
method(:resolve_main_under_path),
|
19
|
+
method(:resolve_alts_under_path),
|
20
|
+
method(:resolve_index_under_path),
|
21
|
+
method(:resolve_component),
|
22
|
+
]
|
23
|
+
super
|
24
|
+
end
|
25
|
+
|
26
|
+
def resolve_component load_path, logical_name, mime_exts
|
27
|
+
dirname = File.join(load_path, logical_name)
|
28
|
+
|
29
|
+
if load_path.split("/").last == "components" && Dir.exist?(dirname)
|
30
|
+
candidates = [{
|
31
|
+
filename: "#{dirname}/#{logical_name}.js",
|
32
|
+
type: "application/javascript",
|
33
|
+
index_alias: "app/assets/components/#{logical_name}.js",
|
34
|
+
}]
|
35
|
+
else
|
36
|
+
candidates = []
|
37
|
+
end
|
38
|
+
|
39
|
+
return candidates, [ URIUtils.build_file_digest_uri(dirname) ]
|
40
|
+
end
|
41
|
+
}
|
13
42
|
end
|
14
43
|
end
|
15
44
|
|
16
45
|
module Directives
|
17
46
|
protected
|
18
47
|
|
19
|
-
def process_component_directive
|
20
|
-
|
21
|
-
|
22
|
-
|
48
|
+
def process_component_directive
|
49
|
+
name = @dirname.split("/").last
|
50
|
+
process_component_css_directive "./#{name}.css"
|
51
|
+
process_component_html_directive "./#{name}.html"
|
23
52
|
end
|
24
53
|
|
25
54
|
def process_component_css_directive path
|
@@ -29,10 +58,6 @@ module Sprockets
|
|
29
58
|
def process_component_html_directive path
|
30
59
|
@required << resolve(path, accept: "text/html", pipeline: :component)
|
31
60
|
end
|
32
|
-
|
33
|
-
def process_component_js_directive path
|
34
|
-
@required << resolve(path, accept: "application/javascript", pipeline: :component)
|
35
|
-
end
|
36
61
|
end
|
37
62
|
|
38
63
|
class Pipeline
|
@@ -40,7 +65,6 @@ module Sprockets
|
|
40
65
|
{
|
41
66
|
"text/css" => [CSSProcessor.new],
|
42
67
|
"text/html" => [HTMLProcessor.new],
|
43
|
-
"application/javascript" => [JSProcessor.new],
|
44
68
|
}.fetch(type) +
|
45
69
|
env.send(:default_processors_for, type, file_type)
|
46
70
|
end
|
@@ -57,13 +81,6 @@ module Sprockets
|
|
57
81
|
"const HTML = `<style>${CSS}</style>\n#{input[:data]}`;\n"
|
58
82
|
end
|
59
83
|
end
|
60
|
-
|
61
|
-
class JSProcessor
|
62
|
-
def call input
|
63
|
-
name = input[:name].split("/").first
|
64
|
-
"#{input[:data]};window.customElements.define('#{name}', #{name.underscore.classify})"
|
65
|
-
end
|
66
|
-
end
|
67
84
|
end
|
68
85
|
end
|
69
86
|
|