jass-react-jsx 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e31ef797726107cd51b539bafc78294404ef819c4786fa70d32abc00ccc69307
+  data.tar.gz: 69064f9603959af47b297a7f62aafccc35a6d1ac9d6b5648296a208926258691
+SHA512:
+  metadata.gz: 5439f946ec3b164a9964adb77b0b54b1e291aa51081b599915b613f3ac68ab3353a7fcaf6947d6cbaed167b321f1c8754c4f4f8ec5bc9548ee5be9773909ebf4
+  data.tar.gz: 6c7b195644fecc9cb5855a52f9a0053fe13e173ee845b398a0d2a141d6dea6301914ebdb2820288c3a1168b5f6fc7ed6527f352ccbcae2524a516afb5d6ccf57

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Matthias Grosser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,94 @@
+[![Gem Version](https://badge.fury.io/rb/jass-react-jsx.svg)](http://badge.fury.io/rb/jass-react-jsx)
+[![build](https://github.com/mtgrosser/jass-react-jsx/actions/workflows/build.yml/badge.svg)](https://github.com/mtgrosser/jass-react-jsx/actions/workflows/build.yml)
+
+# Jass::React::JSX – React JSX support for the Rails asset pipeline
+
+`Jass::React::JSX` enables Sprockets and the Rails asset pipeline to compile [React JSX components](https://reactjs.org/docs/introducing-jsx.html).
+
+JSX components will be compiled to ES modules, which can be imported using the new Rails [Import Maps](https://github.com/rails/importmap-rails) or
+regular `<script module>` tags.
+
+## Motivation
+
+Modern browsers support native loading of ES modules using the `import` statement.
+By leveraging the new Rails Import Maps, modular JS applications can be built
+without having to integrate a complex and tedious JS build pipeline. 
+
+However, framework-specific component formats like the React JSX format could not
+be used this way till now.
+
+`Jass::React::JSX` enables the asset pipeline to compile `.jsx` files to ES modules,
+allowing to build modular React applications in a clear and straightforward way,
+without the necessity of external build tools.
+
+## Installation
+
+### Gemfile
+
+```ruby
+gem 'jass-react-jsx'
+```
+
+### JS dependencies
+
+Add the Babel transformers to your JS dependencies:
+```sh
+$ yarn add @babel/core @babel/plugin-transform-react-jsx
+```
+
+### Node.js
+
+`Jass::React::JSX` depends on [Nodo](https://github.com/mtgrosser/nodo), which requires a working Node.js installation.
+
+## Usage
+
+Place your `.jsx` components inside your regular `app/javascript` path.
+
+In `app/javascript/components/HelloWorld.jsx`:
+
+```jsx
+import { Component } from "react";
+
+export default class HelloWorld extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>The current UNIX date is {Date.now()}.</h2>
+      </div>
+    );
+  }
+}
+```
+
+In your HTML code, load the component as a module:
+
+```erb
+<%= javascript_include_tag 'components/HelloWorld.js', module: true %>
+```
+
+### Components with imports
+
+In order to use module `import`s within your components, you need to pin them in your Rails importmap:
+
+```ruby
+# config/importmap.rb
+pin "react", to: "https://cdn.esm.sh/v45/react@17.0.2/es2021/react.js"
+pin "react-dom", to: "https://cdn.esm.sh/v45/react-dom@17.0.2/es2021/react-dom.js"
+pin "react/jsx-runtime", to: "https://cdn.esm.sh/v45/react@17.0.2/es2021/jsx-runtime.js"
+
+pin "components/HelloWorld.jsx", to: "components/HelloWorld.js"
+```
+
+Then just use them in your JS code:
+
+```js
+import { render } from "react-dom";
+import HelloWorld from "components/HelloWorld.jsx";
+```
+
+## Limitations
+
+Currently, the following things are not (yet) supported:
+
+- source maps

data/lib/jass/react/jsx/compiler.rb

@@ -0,0 +1,26 @@
+class Jass::React::JSX::Compiler < Nodo::Core
+  require babelCore: '@babel/core', 
+          pluginTransformReactJSX: '@babel/plugin-transform-react-jsx'
+
+  class_function def compile(source, filename)
+    filename = File.basename(filename)
+    compile_component(source, filename)
+  end
+  
+  function :compile_component, <<~'JS'
+    (source, filename) => {
+      let code = '';
+      nodo.debug(`Compiling component ${filename}`);
+      
+      const result = babelCore.transformSync(source,
+        { plugins: [
+            ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" } ]
+          ]
+        }
+      );
+      
+      return { code: result.code, map: result.map };
+    }
+  JS
+
+end

data/lib/jass/react/jsx/processor.rb

@@ -0,0 +1,25 @@
+module Jass::React::JSX::Processor
+  VERSION = '1'
+
+  class << self
+    
+    def cache_key
+      @cache_key ||= [name, VERSION].freeze
+    end
+    
+    def call(input)
+      data = input[:data]
+
+      js, map = input[:cache].fetch(cache_key + [input[:filename]] + [data]) do
+        result = Jass::React::JSX::Compiler.compile(data, input[:filename])
+        result.values_at('code', 'map')
+      end
+
+      #map = Sprockets::SourceMapUtils.format_source_map(map, input)
+      #map = Sprockets::SourceMapUtils.combine_source_maps(input[:metadata][:map], map)
+
+      { data: js } #, map: map }
+    end
+  
+  end
+end

data/lib/jass/react/jsx/version.rb

@@ -0,0 +1,7 @@
+module Jass
+  module React
+    module JSX
+      VERSION = '0.3.0'
+    end
+  end
+end

data/lib/jass/react/jsx.rb

@@ -0,0 +1,17 @@
+require 'nodo'
+
+require_relative 'jsx/version'
+require_relative 'jsx/compiler'
+
+begin
+  require 'sprockets'
+rescue LoadError
+  # Sprockets not available
+end
+
+if defined?(Sprockets)
+  require_relative 'jsx/processor'
+
+  Sprockets.register_mime_type 'text/jsx', extensions: %w[.jsx], charset: :unicode
+  Sprockets.register_transformer 'text/jsx', 'application/javascript', Jass::React::JSX::Processor
+end

data/lib/jass-react-jsx.rb

@@ -0,0 +1 @@
+require_relative 'jass/react/jsx'

metadata

@@ -0,0 +1,120 @@
+--- !ruby/object:Gem::Specification
+name: jass-react-jsx
+version: !ruby/object:Gem::Version
+  version: 0.3.0
+platform: ruby
+authors:
+- Matthias Grosser
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2021-10-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: nodo
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.6.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.6.0
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: byebug
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description:
+email:
+- mtgrosser@gmx.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/jass-react-jsx.rb
+- lib/jass/react/jsx.rb
+- lib/jass/react/jsx/compiler.rb
+- lib/jass/react/jsx/processor.rb
+- lib/jass/react/jsx/version.rb
+homepage: https://github.com/mtgrosser/jass-react-jsx
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.4
+signing_key:
+specification_version: 4
+summary: Compile React JSX for Sprockets
+test_files: []