proscenium 0.8.2-aarch64-linux → 0.9.1-aarch64-linux

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fd2d28c087f38da818d19f9e7f3e220f58d398d3b6d311b8ab6775b7f5c3ec86
4
- data.tar.gz: a88d6e8d7ac18e74427c1f35240b3fad8cace9fbc2ea79f49765dbd61d2549c0
3
+ metadata.gz: 6c27aded2315943ff0541119bdb54e7c63df7d010ea9b08254ca9f125c61fe0e
4
+ data.tar.gz: 50138ddc893e12b2f37a4d426c2cebe8e291eb1914e99b468b80b212d5ae86d0
5
5
  SHA512:
6
- metadata.gz: 52c756b27c66108cb0e62e69011eeaf8479689a51f7b2cead75fef71607c0e88a9d573c1e571ef5c374714376d2520eee09019b7f04d98d5cde455f1cab8440a
7
- data.tar.gz: 349f1447131af581ea006d66814ae897ba626b5c6502ca321d1bda09cea6df78bee373224bff788c44a1ccb1958084f43f4db3d5787b203b6d7f138ded9e0027
6
+ metadata.gz: c5f7ce89b76598f2b0c053fa19304d143ecc462c758bcb94cb0874e2425db8ac92e6386ae886928db901b1fe110bd1251a882f3051499e9af552c5731a3aff9b
7
+ data.tar.gz: 235609303eed6fe09a8afdcf5e0acdb971002e63028807412913b691447f0dcd21f7e5a724fc03fec0ceedf60597fa0795383a212e538fd0533efebbe346ea6c
data/README.md CHANGED
@@ -1,24 +1,32 @@
1
- # Proscenium - Modern Client-Side Tooling for Rails
1
+ # Proscenium - Modern client-side development for Rails
2
2
 
3
3
  Proscenium treats your client-side code as first class citizens of your Rails app, and assumes a
4
4
  "fast by default" internet. It bundles your JS, JSX and CSS in real time, on demand, and with zero
5
5
  configuration.
6
6
 
7
- - Zero configuration.
8
7
  - Fast real-time bundling, tree-shaking and minification.
8
+ - Real time bundling of Javascript (.js,.jsx), Typescript (.ts,.tsx) and CSS (.css).
9
9
  - NO JavaScript runtime - just the browser!
10
+ - NO build step or pre-compilation.
11
+ - NO additional process or server - Just run Rails!
10
12
  - Deep integration with Rails.
11
- - No additional process or server - Just run Rails!
13
+ - Zero configuration.
12
14
  - Serve assets from anywhere within your Rails root (/app, /config, /lib, etc.).
13
- - Automatically side load JS/CSS for your layouts and views.
14
- - Import JS(X), TS(X) and CSS from NPM, URL, and locally.
15
- - Support for JSX.
15
+ - Automatically side load JS/TS/CSS for your layouts and views.
16
+ - Import from NPM, URLs, and locally.
16
17
  - Server-side import map support.
17
18
  - CSS Modules.
18
19
  - CSS mixins.
19
20
  - Source maps.
20
21
  - Phlex and ViewComponent integration.
21
22
 
23
+ ## Getting Started
24
+
25
+ Getting started obviously depends on whether you are adding Proscenium to an existing Rails app, or creating a new Rails app. So please choose the appropriate guide below:
26
+
27
+ - [Getting Started with a new Rails app](https://github.com/joelmoss/proscenium/blob/master/docs/guides/new_rails_app.md)
28
+ - Getting Started with an existing Rails app *[Coming soon]*
29
+
22
30
  ## Installation
23
31
 
24
32
  Add this line to your Rails application's Gemfile, and you're good to go:
@@ -45,6 +53,45 @@ Using the examples above...
45
53
  - `app/components/menu_component.jsx` => `https://yourapp.com/app/components/menu_component.jsx`
46
54
  - `config/properties.css` => `https://yourapp.com/config/properties.css`
47
55
 
56
+ ### Include Paths
57
+
58
+ By default, Proscenium will serve files ending with any of these extension: `js,mjs,ts,css,jsx,tsx`, and only from `app/assets`, `config`, `app/views`, `lib` and `node_modules` directories.
59
+
60
+ However, you can customise these paths with the `include_path` config option...
61
+
62
+ ```ruby
63
+ Rails.application.config.proscenium.include_paths << 'app/components'
64
+ ```
65
+
66
+ ## Side Loading
67
+
68
+ Proscenium has built in support for automatically side loading JS, TS and CSS with your views and
69
+ layouts.
70
+
71
+ Just create a JS and/or CSS file with the same name as any view or layout, and make sure your
72
+ layouts include `<%= side_load_stylesheets %>` and `<%= side_load_javascripts %>`. Something like
73
+ this:
74
+
75
+ ```html
76
+ <!DOCTYPE html>
77
+ <html>
78
+ <head>
79
+ <title>Hello World</title>
80
+ <%= side_load_stylesheets %>
81
+ </head>
82
+ <body>
83
+ <%= yield %>
84
+ <%= side_load_javascripts defer: true, type: 'module' %>
85
+ </body>
86
+ </html>
87
+ ```
88
+
89
+ On each page request, Proscenium will check if your layout and view has a JS/TS/CSS file of the same
90
+ name, and include them into your layout HTML. Partials are not side loaded.
91
+
92
+ Side loading is enabled by default, but you can disable it by setting `config.proscenium.side_load`
93
+ to `false`.
94
+
48
95
  ## Importing
49
96
 
50
97
  Proscenium supports importing JS, JSX, TS and CSS from NPM, by URL, your local app, and even from Ruby Gems.
@@ -129,36 +176,81 @@ env => ({
129
176
  })
130
177
  ```
131
178
 
132
- ## Side Loading
179
+ ## Importing SVG from JS(X) and TS(X)
133
180
 
134
- Proscenium has built in support for automatically side loading JS and CSS with your views and
135
- layouts.
181
+ Importing SVG from JS(X) will bundle the SVG source code. Additionally, if importing from JSX or TSX, the SVG source code will be rendered as a JSX/TSX component.
136
182
 
137
- Just create a JS and/or CSS file with the same name as any view or layout, and make sure your
138
- layouts include `<%= side_load_stylesheets %>` and `<%= side_load_javascripts %>`. Something like
139
- this:
183
+ ## Environment Variables
140
184
 
141
- ```html
142
- <!DOCTYPE html>
143
- <html>
144
- <head>
145
- <title>Hello World</title>
146
- <%= side_load_stylesheets %>
147
- </head>
148
- <body>
149
- <%= yield %>
150
- <%= side_load_javascripts defer: true, type: 'module' %>
151
- </body>
152
- </html>
185
+ Import any environment variables into your JS(X) code.
186
+
187
+ ```js
188
+ import RAILS_ENV from '@proscenium/env/RAILS_ENV'
153
189
  ```
154
190
 
155
- On each page request, Proscenium will check if your layout and view has a JS/CSS file of the same
156
- name, and include them into your layout HTML. Partials are not side loaded.
191
+ You can only access environment variables that are explicitly named. It will export `undefined` if the env variable does not exist.
157
192
 
158
- Side loading is enabled by default, but you can disable it by setting `config.proscenium.side_load`
159
- to `false`.
193
+ ## Importing i18n
194
+
195
+ Basic support is provided for importing your Rails locale files from `config/locales/*.yml`, exporting them as JSON.
196
+
197
+ ```js
198
+ import translations from '@proscenium/i18n'
199
+ // translations.en.*
200
+ ```
201
+
202
+ ## Javascript
203
+
204
+ By default, Proscenium's output will take advantage of all modern JS features. For example, `a !== void 0 && a !== null ? a : b` will become `a ?? b` when minifying (enabled by default in production), which makes use of syntax from the ES2020 version of JavaScript.
205
+
206
+ ### Tree Shaking
207
+
208
+ Tree shaking is the term the JavaScript community uses for dead code elimination, a common compiler optimization that automatically removes unreachable code. Tree shaking is enabled by default in Proascenium.
209
+
210
+ ```javascript
211
+ function one() {
212
+ console.log('one')
213
+ }
214
+ function two() {
215
+ console.log('two')
216
+ }
217
+ one()
218
+ ```
219
+
220
+ The above code will be transformed to the following code, discarding `two()`, as it is never called.
221
+
222
+ ```javascript
223
+ function one() {
224
+ console.log("one");
225
+ }
226
+ one();
227
+ ```
228
+
229
+ ### JavaScript Caveats
230
+
231
+ There are a few important caveats as far as JavaScript is concerned. These are [detailed on the esbuild site](https://esbuild.github.io/content-types/#javascript-caveats).
160
232
 
161
- ## CSS Modules
233
+ ## CSS
234
+
235
+ CSS is a first-class content type in Proscenium, which means it can bundle CSS files directly without needing to import your CSS from JavaScript code. You can `@import` other CSS files and reference image and font files with `url()` and Proscenium will bundle everything together.
236
+
237
+ Note that by default, Proscenium's output will take advantage of all modern CSS features. For example, `color: rgba(255, 0, 0, 0.4)` will become `color: #f006` after minifying in production, which makes use of syntax from [CSS Color Module Level 4](https://drafts.csswg.org/css-color-4/#changes-from-3).
238
+
239
+ The new CSS nesting syntax is supported, and transformed into non-nested CSS for older browsers.
240
+
241
+ ### Importing from JavaScript
242
+
243
+ You can also import CSS from JavaScript. When you do this, Proscenium will automatically append each stylesheet to the document's head as a `<link>` element.
244
+
245
+ ```jsx
246
+ import './button.css'
247
+
248
+ export let Button = ({ text }) => {
249
+ return <div className="button">{text}</div>
250
+ }
251
+ ```
252
+
253
+ ### CSS Modules
162
254
 
163
255
  Proscenium implements a subset of [CSS Modules](https://github.com/css-modules/css-modules). It supports the `:local` and `:global` keywords, but not the `composes` property. It is recommended that you use mixins instead of `composes`, as they work everywhere.
164
256
 
@@ -189,7 +281,7 @@ It is important to note that the exported object of CSS module names is actually
189
281
 
190
282
  Also, importing a CSS module from another CSS module will result in the same digest string for all classes.
191
283
 
192
- ## CSS Mixins
284
+ ### CSS Mixins
193
285
 
194
286
  Proscenium provides functionality for including or "mixing in" onr or more CSS classes into another. This is similar to the `composes` property of CSS Modules, but works everywhere, and is not limited to CSS Modules.
195
287
 
@@ -238,27 +330,49 @@ p {
238
330
 
239
331
  CSS modules and Mixins works perfectly together. You can include a mixin in a CSS module.
240
332
 
241
- ## Importing SVG from JS(X)
333
+ ### CSS Caveats
242
334
 
243
- Importing SVG from JS(X) will bundle the SVG source code. Additionally, if importing from JSX, the SVG source code will be rendered as a JSX component.
335
+ There are a few important caveats as far as CSS is concerned. These are [detailed on the esbuild site](https://esbuild.github.io/content-types/#css-caveats).
244
336
 
245
- ## Environment Variables
337
+ ## Typescript
246
338
 
247
- Import any environment variables into your JS(X) code.
339
+ Typescript and TSX is supported out of the box, and has built-in support for parsing TypeScript syntax and discarding the type annotations. Just rename your files to `.ts` or `.tsx` and you're good to go.
248
340
 
249
- ```js
250
- import RAILS_ENV from '@proscenium/env/RAILS_ENV'
341
+ Please note that Proscenium does not do any type checking so you will still need to run `tsc -noEmit` in parallel with Proscenium to check types.
342
+
343
+ ### Typescript Caveats
344
+
345
+ There are a few important caveats as far as Typescript is concerned. These are [detailed on the esbuild site](https://esbuild.github.io/content-types/#typescript-caveats).
346
+
347
+ ## JSX
348
+
349
+ Using JSX syntax usually requires you to manually import the JSX library you are using. For example, if you are using React, by default you will need to import React into each JSX file like this:
350
+
351
+ ```javascript
352
+ import * as React from 'react'
353
+ render(<div/>)
251
354
  ```
252
355
 
253
- You can only access environment variables that are explicitly named. It will export `undefined` if the env variable does not exist.
356
+ This is because the JSX transform turns JSX syntax into a call to `React.createElement` but it does not itself import anything, so the React variable is not automatically present.
254
357
 
255
- ## Importing i18n
358
+ Proscenium generates these import statements for you. Keep in mind that this also completely changes how the JSX transform works, so it may break your code if you are using a JSX library that is not React.
256
359
 
257
- Basic support is provided for importing your Rails locale files from `config/locales/*.yml`, exporting them as JSON.
360
+ In the [not too distant] future, you will be able to configure Proscenium to use a different JSX library, or to disable this auto-import completely.
258
361
 
259
- ```js
260
- import translations from '@proscenium/i18n'
261
- // translations.en.*
362
+ ## JSON
363
+
364
+ Importing .json files parses the JSON file into a JavaScript object, and exports the object as the default export. Using it looks something like this:
365
+
366
+ ```javascript
367
+ import object from './example.json'
368
+ console.log(object)
369
+ ```
370
+
371
+ In addition to the default export, there are also named exports for each top-level property in the JSON object. Importing a named export directly means Proscenium can automatically remove unused parts of the JSON file from the bundle, leaving only the named exports that you actually used. For example, this code will only include the version field when bundled:
372
+
373
+ ```javascript
374
+ import { version } from './package.json'
375
+ console.log(version)
262
376
  ```
263
377
 
264
378
  ## Phlex Support
@@ -289,16 +403,6 @@ The cache is set with a `max-age` of 30 days. You can customise this with the `c
289
403
  Rails.application.config.proscenium.cache_max_age = 12.months.to_i
290
404
  ```
291
405
 
292
- ## Include Paths
293
-
294
- By default, Proscenium will serve files ending with any of these extension: `js,mjs,css,jsx`, and only from `config`, `app/views`, `lib` and `node_modules` directories.
295
-
296
- However, you can customise these paths with the `include_path` config option...
297
-
298
- ```ruby
299
- Rails.application.config.proscenium.include_paths << 'app/components'
300
- ```
301
-
302
406
  ## rjs is back!
303
407
 
304
408
  Proscenium brings back RJS! Any path ending in .rjs will be served from your Rails app. This allows you to import server rendered javascript.
@@ -307,11 +411,33 @@ Proscenium brings back RJS! Any path ending in .rjs will be served from your Rai
307
411
 
308
412
  *docs needed*
309
413
 
414
+ ## Thanks 🙏
415
+
416
+ HUGE thanks go to [Evan Wallace](https://github.com/evanw) and his amazing [esbuild](https://esbuild.github.io/) project. Proscenium would not be possible without it, and it is esbuild that makes this so fast and efficient.
417
+
418
+ Because Proscenium uses esbuild extensively, some of these docs are taken directly from the esbuild docs, with links back to the [esbuild site](https://esbuild.github.io/) where appropriate.
419
+
310
420
  ## Development
311
421
 
312
- After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
422
+ Before doing anything else, you will need compile a local version of the Go binary. This is because the Go binary is not checked into the repo. To compile the binary, run:
423
+
424
+ ```bash
425
+ bundle exec rake compile:local
426
+ ```
313
427
 
314
- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
428
+ ### Running tests
429
+
430
+ We have tests for both Ruby and Go. To run the Ruby tests:
431
+
432
+ ```bash
433
+ bundle exec rake test
434
+ ```
435
+
436
+ To run the Go tests:
437
+
438
+ ```bash
439
+ go test ./test
440
+ ```
315
441
 
316
442
  ### Running Go benchmarks
317
443
 
Binary file
@@ -1,6 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- require 'open3'
4
3
  require 'oj'
5
4
 
6
5
  module Proscenium
@@ -71,9 +70,13 @@ module Proscenium
71
70
  end
72
71
 
73
72
  def content_type
74
- @content_type ||
75
- ::Rack::Mime.mime_type(::File.extname(path_to_build), nil) ||
76
- 'application/javascript'
73
+ case ::File.extname(path_to_build)
74
+ when '.js', '.mjs', '.ts', '.tsx', '.jsx' then 'application/javascript'
75
+ when '.css' then 'text/css'
76
+ when '.map' then 'application/json'
77
+ else
78
+ ::Rack::Mime.mime_type(::File.extname(path_to_build), nil) || 'application/javascript'
79
+ end
77
80
  end
78
81
 
79
82
  def render_response(content)
@@ -30,30 +30,23 @@ module Proscenium
30
30
 
31
31
  # file_handler.attempt(request.env) || type.attempt(request)
32
32
 
33
- type.attempt(request)
33
+ type.attempt request
34
34
  end
35
35
 
36
- # Returns the type of file being requested using Proscenium::MIDDLEWARE_GLOB_TYPES.
37
36
  def find_type(request)
38
- path = Pathname.new(request.path)
39
-
40
- return Url if request.path.match?(glob_types[:url])
41
- return Esbuild if path.fnmatch?(application_glob_type, File::FNM_EXTGLOB)
42
- end
43
-
44
- # TODO: handle precompiled assets
45
- def file_handler
46
- ::ActionDispatch::FileHandler.new Rails.public_path.join('assets').to_s,
47
- headers: { 'X-Proscenium-Middleware' => 'precompiled' }
37
+ return Url if request.path.match?(%r{^/https?%3A%2F%2F})
38
+ return Esbuild if Pathname.new(request.path).fnmatch?(path_glob, File::FNM_EXTGLOB)
48
39
  end
49
40
 
50
- def glob_types
51
- @glob_types ||= Proscenium::MIDDLEWARE_GLOB_TYPES
52
- end
53
-
54
- def application_glob_type
41
+ def path_glob
55
42
  paths = Rails.application.config.proscenium.include_paths.join(',')
56
- "/{#{paths}}#{glob_types[:application]}"
43
+ "/{#{paths}}/**.{#{FILE_EXTENSIONS.join(',')}}"
57
44
  end
45
+
46
+ # TODO: handle precompiled assets
47
+ # def file_handler
48
+ # ::ActionDispatch::FileHandler.new Rails.public_path.join('assets').to_s,
49
+ # headers: { 'X-Proscenium-Middleware' => 'precompiled' }
50
+ # end
58
51
  end
59
52
  end
@@ -6,14 +6,10 @@ require 'proscenium/log_subscriber'
6
6
  ENV['RAILS_ENV'] = Rails.env
7
7
 
8
8
  module Proscenium
9
- FILE_EXTENSIONS = ['js', 'mjs', 'jsx', 'css', 'js.map', 'mjs.map', 'jsx.map', 'css.map'].freeze
9
+ FILE_EXTENSIONS = ['js', 'mjs', 'ts', 'jsx', 'tsx', 'css', 'js.map', 'mjs.map', 'jsx.map',
10
+ 'ts.map', 'tsx.map', 'css.map'].freeze
10
11
 
11
- MIDDLEWARE_GLOB_TYPES = {
12
- application: "/**.{#{FILE_EXTENSIONS.join(',')}}",
13
- url: %r{^/https?%3A%2F%2F}
14
- }.freeze
15
-
16
- APPLICATION_INCLUDE_PATHS = ['config', 'app/views', 'lib', 'node_modules'].freeze
12
+ APPLICATION_INCLUDE_PATHS = ['config', 'app/assets', 'app/views', 'lib', 'node_modules'].freeze
17
13
 
18
14
  class << self
19
15
  def config
@@ -7,7 +7,7 @@ module Proscenium
7
7
 
8
8
  out = []
9
9
  Proscenium::Current.loaded[:css].delete_if do |path|
10
- out << stylesheet_link_tag(path)
10
+ out << stylesheet_link_tag(path, extname: false)
11
11
  end
12
12
  out.join("\n").html_safe
13
13
  end
@@ -17,7 +17,7 @@ module Proscenium
17
17
 
18
18
  out = []
19
19
  Proscenium::Current.loaded[:js].delete_if do |path|
20
- out << javascript_include_tag(path, options)
20
+ out << javascript_include_tag(path, extname: false, **options)
21
21
  end
22
22
  out.join("\n").html_safe
23
23
  end
@@ -11,13 +11,19 @@ module Proscenium
11
11
  autoload :EnsureLoaded
12
12
 
13
13
  EXTENSIONS = %i[js css].freeze
14
- EXTENSION_MAP = { '.css' => :css, '.js' => :js }.freeze
14
+ EXTENSION_MAP = {
15
+ '.css' => :css,
16
+ # '.tsx' => :js,
17
+ '.ts' => :js,
18
+ # '.jsx' => :js,
19
+ '.js' => :js
20
+ }.freeze
15
21
 
16
22
  attr_reader :path
17
23
 
18
24
  class << self
19
- # Side load the given asset `path`, by appending it to `Proscenium::Current.loaded`, which is a
20
- # Set of 'js' and 'css' asset paths. This is idempotent, so side loading will never include
25
+ # Side load the given asset `path`, by appending it to `Proscenium::Current.loaded`, which is
26
+ # a Set of 'js' and 'css' asset paths. This is idempotent, so side loading will never include
21
27
  # duplicates.
22
28
  #
23
29
  # @return [Array] appended URL paths
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Proscenium
4
- VERSION = '0.8.2'
4
+ VERSION = '0.9.1'
5
5
  end
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.8.2
4
+ version: 0.9.1
5
5
  platform: aarch64-linux
6
6
  authors:
7
7
  - Joel Moss
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-06-07 00:00:00.000000000 Z
11
+ date: 2023-06-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: activesupport