proscenium 0.19.0.beta20-x86_64-linux → 0.19.0-x86_64-linux
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +21 -15
- data/lib/proscenium/builder.rb +1 -0
- data/lib/proscenium/css_module/transformer.rb +1 -1
- data/lib/proscenium/ext/proscenium +0 -0
- data/lib/proscenium/helper.rb +0 -12
- data/lib/proscenium/side_load.rb +2 -2
- data/lib/proscenium/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e686c9d55f815ad70fc17be7ad98bde1bfaf57dd426464a75fda4b3f08fd3d9d
|
4
|
+
data.tar.gz: 362e72b47cdcb0743cff1ab94e3cc413f2b85e605225fbc2706342760958133a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 17a945e83e1e18faff56b408ef10245dec73b7baea589f41fc5125d7febb89f88463c09b2a868889ee8275879961b2e04cf3b9ef6c6632f1612504aa7d4aa2ae
|
7
|
+
data.tar.gz: 889ed2b063887281c9aa1e51c28f5c7aad1bc8f400bf5090e7121b0fc6718c9e4584b9c5d5320a99a8029c4cccd1255fffaefa761f648920d879ea45463c390d
|
data/README.md
CHANGED
@@ -6,17 +6,17 @@
|
|
6
6
|
>
|
7
7
|
> - _the part of a theatre stage in front of the curtain._
|
8
8
|
|
9
|
-
**_Proscenium_** treats your frontend and client-side code as first class citizens of your Rails app, and assumes a "fast by default" internet. It bundles and minifies JavaScript (+
|
9
|
+
**_Proscenium_** treats your frontend and client-side code as first class citizens of your Rails app, and assumes a "fast by default" internet. It bundles and minifies JavaScript (+JSX), TypeScript (+TSX) and CSS in real time, on demand, and with zero configuration.
|
10
10
|
|
11
11
|
**The highlights:**
|
12
12
|
|
13
13
|
- Fast, real-time bundling, tree-shaking, code-splitting and minification of Javascript (.js,.jsx), Typescript (.ts,.tsx) and CSS (.css).
|
14
14
|
- NO JavaScript runtime needed (eg. Node) - just the browser!
|
15
15
|
- NO build step or pre-compilation.
|
16
|
-
- NO additional process or server - Just run `rails
|
16
|
+
- NO additional process or server - Just run `rails server`!
|
17
17
|
- Transforms newer JavaScript and CSS syntax to older syntax for older browsers.
|
18
18
|
- Deep integration with Rails.
|
19
|
-
- Automatically side-load your layouts, views, and partials.
|
19
|
+
- Automatically side-load JS and CSS for your layouts, views, and partials.
|
20
20
|
- Import from NPM, URL's, and locally.
|
21
21
|
- Server-side import map support.
|
22
22
|
- CSS Modules & mixins.
|
@@ -75,15 +75,15 @@ gem 'proscenium'
|
|
75
75
|
|
76
76
|
Please note that Proscenium is designed solely for use with Rails.
|
77
77
|
|
78
|
-
Now if you start your Rails app, you can open any front end code (JS, CSS, etc.). For example, a file at `app/assets/stylesheets/application.css` can be accessed at `https://localhost:3000/app/assets/stylesheets/application.css`, which will be
|
78
|
+
Now if you start your Rails app, you can open any front end code (JS, CSS, etc.). For example, a file at `app/assets/stylesheets/application.css` can be accessed at `https://localhost:3000/app/assets/stylesheets/application.css`, which will be transformed, bundled, and minified [in production] in real time.
|
79
79
|
|
80
80
|
## Client-Side Code Anywhere
|
81
81
|
|
82
|
-
Proscenium believes that your frontend code is just as important as your backend code, and is not an afterthought - they should be first class citizens of your Rails app. So instead of having to throw all your JS and CSS into a "app/assets" directory, and then requiring a separate process to compile or bundle,
|
82
|
+
Proscenium believes that your frontend code is just as important as your backend code, and is not an afterthought - they should be first class citizens of your Rails app. So instead of having to throw all your JS and CSS into a "app/assets" directory, and then requiring a separate process to compile or bundle, you can simply put them wherever you want within your app, and just run Rails!
|
83
83
|
|
84
84
|
For example, if you have some JS that is required by your `app/views/users/index.html.erb` view, just create a JS file alongside it at `app/views/users/index.js`. Or if you have some CSS that is used by your entire application, put it in `app/views/layouts/application.css` and load it alongside your layout. Maybe you have a few JS utility functions, so put them in `lib/utils.js`.
|
85
85
|
|
86
|
-
Simply put your JS(X) and CSS anywhere you want, and they will be served by your Rails app from the location where you placed them.
|
86
|
+
Simply put your JS(X) and CSS anywhere you want, and they will be served by your Rails app from the same location where you placed them.
|
87
87
|
|
88
88
|
Using the examples above...
|
89
89
|
|
@@ -95,15 +95,15 @@ Using the examples above...
|
|
95
95
|
|
96
96
|
## Side Loading
|
97
97
|
|
98
|
-
Proscenium is best experienced when your assets are
|
98
|
+
Proscenium is best experienced when your assets are automatically side loaded.
|
99
99
|
|
100
100
|
### The Problem
|
101
101
|
|
102
|
-
With Rails you would typically
|
102
|
+
With Rails you would typically load your JavaScript and CSS assets declaratively using the `javascript_include_tag` and `stylesheet_link_tag` helpers.
|
103
103
|
|
104
|
-
For example, you may have top-level "application"
|
104
|
+
For example, you may have top-level "application" styles located in a file at `/app/assets/stylesheets/application.css`. Likewise, you may have some global JavaScript located in a file at `/app/javascript/application.js`.
|
105
105
|
|
106
|
-
You would manually and declaratively include those two files in your
|
106
|
+
You would manually and declaratively include those two files in each of your layouts, something like this:
|
107
107
|
|
108
108
|
```erb
|
109
109
|
<%# /app/views/layouts/application.html.erb %>
|
@@ -141,7 +141,9 @@ The main problem is that you have to keep track of all these assets, and make su
|
|
141
141
|
|
142
142
|
When side loading your JavaScript, Typescript and CSS with Proscenium, they are automatically included alongside your views, partials, layouts, and components, and only when needed.
|
143
143
|
|
144
|
-
Side loading works by looking for a JS/TS/CSS file with the same name as your view, partial, layout or component. For example, if you have a view at `app/views/users/index.html.erb`, then Proscenium will look for a JS
|
144
|
+
Side loading works by looking for a JS/TS/CSS file with the same name as your view, partial, layout or component. For example, if you have a view at `app/views/users/index.html.erb`, then Proscenium will look for a JS and CSS file at `app/views/users/index.js` (or TypeScript with a .ts extension) and `app/views/users/index.css`. If it finds one, it will automatically include it in the HTML for that view. And only for that view.
|
145
|
+
|
146
|
+
This allows you to keep your assets organized alongside the views, partials, and components that use them, without having to manually track and include them. It also means only the assets that are needed are included.
|
145
147
|
|
146
148
|
JSX is also supported for JavaScript and Typescript. Simply use the `.jsx` or `.tsx` extension instead of `.js` or `.ts`.
|
147
149
|
|
@@ -272,6 +274,14 @@ Then just import as normal:
|
|
272
274
|
import React from "react";
|
273
275
|
```
|
274
276
|
|
277
|
+
Or if you don't want any bundling at all, simply turn it off application-wide:
|
278
|
+
|
279
|
+
```ruby
|
280
|
+
config.proscenium.bundle = false
|
281
|
+
```
|
282
|
+
|
283
|
+
This will mean every asset and import will be loaded independently.
|
284
|
+
|
275
285
|
## Import Maps
|
276
286
|
|
277
287
|
> **[WIP]**
|
@@ -441,8 +451,6 @@ one();
|
|
441
451
|
|
442
452
|
### Code Splitting
|
443
453
|
|
444
|
-
> Available in `>=0.10.0`.
|
445
|
-
|
446
454
|
[Side loaded](#side-loading) assets are automatically code split. This means that if you have a file that is imported and used imported several times, and by different files, it will be split off into a separate file.
|
447
455
|
|
448
456
|
As an example:
|
@@ -682,8 +690,6 @@ console.log(version);
|
|
682
690
|
|
683
691
|
## Cache Busting
|
684
692
|
|
685
|
-
> _COMING SOON_
|
686
|
-
|
687
693
|
By default, all assets are not cached by the browser. But if in production, you populate the `REVISION` env variable, all CSS and JS URL's will be appended with its value as a query string, and the `Cache-Control` response header will be set to `public` and a max-age of 30 days.
|
688
694
|
|
689
695
|
For example, if you set `REVISION=v1`, URL's will be appended with `?v1`: `/my/imported/file.js?v1`.
|
data/lib/proscenium/builder.rb
CHANGED
@@ -70,7 +70,7 @@ module Proscenium
|
|
70
70
|
digest = Importer.import(resolved_path)
|
71
71
|
|
72
72
|
transformed_path = ''
|
73
|
-
transformed_path = "__#{resolved_path[1..].gsub(%r{[
|
73
|
+
transformed_path = "__#{resolved_path[1..].gsub(%r{[@/.+]}, '-')}" if Rails.env.development?
|
74
74
|
transformed_name = name.to_s
|
75
75
|
transformed_name = if transformed_name.start_with?('_')
|
76
76
|
"_#{transformed_name[1..]}-#{digest}#{transformed_path}"
|
Binary file
|
data/lib/proscenium/helper.rb
CHANGED
@@ -40,18 +40,6 @@ module Proscenium
|
|
40
40
|
.map { |name, _| name }.join(' ')
|
41
41
|
end
|
42
42
|
|
43
|
-
# @param name [String,Symbol,Array<String,Symbol>]
|
44
|
-
# @param path [Pathname] the path to the CSS file to use for the transformation.
|
45
|
-
# @return [String] the transformed CSS module names concatenated as a string.
|
46
|
-
def class_names(*names, path: nil)
|
47
|
-
names = names.flatten.compact
|
48
|
-
|
49
|
-
return if names.empty?
|
50
|
-
|
51
|
-
path ||= Pathname.new(@lookup_context.find(@virtual_path).identifier).sub_ext('')
|
52
|
-
CssModule::Transformer.new(path).class_names(*names).map { |name, _| name }.join(' ')
|
53
|
-
end
|
54
|
-
|
55
43
|
def include_assets
|
56
44
|
include_stylesheets + include_javascripts
|
57
45
|
end
|
data/lib/proscenium/side_load.rb
CHANGED
@@ -134,7 +134,7 @@ module Proscenium
|
|
134
134
|
# in the ancestry is also sideloaded in addition to the regular CSS files. This is because
|
135
135
|
# the CSS module digest will be different for each file, so we only sideload the first CSS
|
136
136
|
# module.
|
137
|
-
css_imports.each do |it|
|
137
|
+
css_imports.each do |it| # rubocop:disable Style/ItAssignment
|
138
138
|
break if Importer.sideload_css_module(it, **options).present?
|
139
139
|
end
|
140
140
|
|
@@ -143,7 +143,7 @@ module Proscenium
|
|
143
143
|
# The reason why we sideload CSS after JS is because the order of CSS is important.
|
144
144
|
# Basically, the layout should be loaded before the view so that CSS cascading works in the
|
145
145
|
# right direction.
|
146
|
-
css_imports.reverse_each do |it|
|
146
|
+
css_imports.reverse_each do |it| # rubocop:disable Style/ItAssignment
|
147
147
|
Importer.sideload_css it, **options
|
148
148
|
end
|
149
149
|
end
|
data/lib/proscenium/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: proscenium
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.19.0
|
4
|
+
version: 0.19.0
|
5
5
|
platform: x86_64-linux
|
6
6
|
authors:
|
7
7
|
- Joel Moss
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2025-
|
11
|
+
date: 2025-09-08 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: ffi
|