bridgetown-lit-renderer 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0b433fc8ed4d01b4ffb96f041a894f48443331dcec6b9d95a892e2c302090642
+  data.tar.gz: c9cdc7615999205a2b559ba20d1b0da57aa80c10469ee39a96edc1fa7d7b3301
+SHA512:
+  metadata.gz: 802f0cb11030c562403b66caf8748450c0e69fd1ec1aa2da6ffbb22be1e9b01801e340e398ea1ce674f2b3f56f252627cb47f30f5efccf05afa478ae873bfe28
+  data.tar.gz: 54d46e263d8b89aca439f8bdd54e512fe27abed9e523a86dfaf1912d88d8e99d90907f3609b05c865ed578de6f347a77fb2f311d861082a7073c0f47908ce4a2

data/.gitignore

@@ -0,0 +1,38 @@
+/vendor
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log
+*.gem
+Gemfile.lock
+.bundle
+.ruby-version
+
+# Node
+node_modules
+.npm
+.node_repl_history
+
+# Yarn
+yarn-error.log
+yarn-debug.log*
+.pnp/
+.pnp.js
+
+# Yarn Integrity file
+.yarn-integrity
+
+test/dest
+.bridgetown-metadata
+.bridgetown-cache
+.bridgetown-webpack

data/.rubocop.yml

@@ -0,0 +1,22 @@
+require: rubocop-bridgetown
+
+inherit_gem:
+  rubocop-bridgetown: .rubocop.yml
+
+AllCops:
+  TargetRubyVersion: 2.5
+  Include:
+    - lib/**/*.rb
+    - test/**/*.rb
+
+  Exclude:
+    - .gitignore
+    - .rubocop.yml
+
+    - Gemfile.lock
+    - CHANGELOG.md
+    - LICENSE.txt
+    - README.md
+
+    - script/**/*
+    - vendor/**/*

data/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+- ...
+
+## 1.0.0 - 2021-09-25
+
+- First release (currently experimental stage).

data/Gemfile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+gemspec
+
+gem "bridgetown", ENV["BRIDGETOWN_VERSION"] if ENV["BRIDGETOWN_VERSION"]
+
+group :test do
+  gem "minitest"
+  gem "minitest-reporters"
+  gem "shoulda"
+end

data/LICENSE.txt

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-present Jared White and Bridgetown contributors
+
+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,92 @@
+# Bridgetown Lit Renderer
+
+Simple pipeline for SSR + hydration of Lit components in your Bridgetown site.
+
+## Installation
+
+Run this command to add this plugin to your site's Gemfile, along with Lit 2 and Lit's SSR support:
+
+```shell
+$ bundle add bridgetown-lit-renderer -g bridgetown_plugins
+
+$ yarn add lit @lit-labs/ssr
+```
+
+Create a file in `config/lit-ssr.config.js` with the following:
+
+```js
+const build = require("bridgetown-lit-renderer/build")
+
+// You can customize this as you wish, perhaps add new esbuild plugins
+const esbuildOptions = {}
+
+build(esbuildOptions)
+```
+
+Add the following to the top of your `frontend/javascript/index.js` file:
+
+```js
+import "bridgetown-lit-renderer"
+import "./lit-components"
+```
+
+For the purposes of testing your install, add the following to `frontend/javascript/lit-components.js`:
+
+```js
+import "lit/experimental-hydrate-support.js"
+import { LitElement, html, css } from "lit"
+
+export class HappyDaysElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      border: 2px dashed gray;
+      margin: 4px;
+      padding: 4px;
+      width: 20vw;
+    }
+  `
+
+  static properties = {
+    hello: { type: String }
+  }
+
+  render() {
+    return html`
+      <p>Hello ${this.hello}! ${Date.now()}</p>
+    `;
+  }
+}
+
+customElements.define('happy-days', HappyDaysElement)
+```
+
+Finally, create a new `.erb` page somewhere in `src`, and add this somewhere in your template:
+
+```erb
+<%= lit data: {hello: "there"} do %>
+  <happy-days hello="${data.hello}"></happy-days>
+<% end %>
+```
+
+Now start up your Bridgetown site, visit the page, and if all goes well, you should see a box containing "Hello there!" and a timestamp when the page was first rendered.
+
+You can reload the page several times and see that the timestamp doesn't change, because Lit's SSR + Hydration support knows not to re-render the component. However, if you change the `hello` attribute in the HTML, you'll get a re-render and thus see a new timestamp. _How cool is that?!_
+
+### Configuration options
+
+…
+
+## Testing
+
+* Run `bundle exec rake test` to run the test suite
+* Or run `script/cibuild` to validate with Rubocop and Minitest together.
+
+## Contributing
+
+1. Fork it (https://github.com/bridgetownrb/bridgetown-lit-renderer/fork)
+2. Clone the fork using `git clone` to your local development machine.
+3. Create your feature branch (`git checkout -b my-new-feature`)
+4. Commit your changes (`git commit -am 'Add some feature'`)
+5. Push to the branch (`git push origin my-new-feature`)
+6. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,11 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/test_*.rb"]
+  t.warning = false
+end
+
+task :default => :test

data/bridgetown-lit-renderer.gemspec

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require_relative "lib/bridgetown-lit-renderer/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "bridgetown-lit-renderer"
+  spec.version       = BridgetownLitRenderer::VERSION
+  spec.author        = "Bridgetown Team"
+  spec.email         = "maintainers@bridgetownrb.com"
+  spec.summary       = "Simple pipeline for SSR + hydration of Lit components"
+  spec.homepage      = "https://github.com/bridgetownrb/bridgetown-lit-renderer"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r!^(test|script|spec|features|frontend)/!) }
+  spec.test_files    = spec.files.grep(%r!^test/!)
+  spec.require_paths = ["lib"]
+  spec.metadata      = { "yarn-add" => "bridgetown-lit-renderer@#{BridgetownLitRenderer::VERSION}" }
+
+  spec.required_ruby_version = ">= 2.5.0"
+
+  spec.add_dependency "bridgetown", ">= 0.15", "< 2.0"
+
+  spec.add_development_dependency "bundler"
+  spec.add_development_dependency "rake", "~> 12.0"
+  spec.add_development_dependency "rubocop-bridgetown", "~> 0.2"
+end

data/lib/bridgetown-lit-renderer/builder.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module BridgetownLitRenderer
+  module Renderer
+    def self.reset_cache
+      @code_cache = {}
+      @lit_notice_printed = false
+    end
+
+    def self.esbuild(code, site)
+      unless @lit_notice_printed
+        Bridgetown.logger.info "Lit SSR:", "Bundling with esbuild..."
+        @lit_notice_printed = true
+      end
+
+      IO.popen(["node", site.in_root_dir("./config/lit-ssr.config.js")], "r+") do |pipe|
+        pipe.puts({ code: code }.to_json)
+        pipe.close_write
+        pipe.read
+      end
+    end
+
+    def self.render(code, data:, entry:, site:) # rubocop:disable Metrics/MethodLength
+      @code_cache ||= {}
+      cache_key = "#{code}#{entry}"
+
+      unless @code_cache[cache_key]
+        build_code = <<~JS
+          import { Readable } from "stream"
+          import { render } from "@lit-labs/ssr/lib/render-with-global-dom-shim.js"
+          import { html } from "lit"
+          import #{entry.to_json}
+
+          const ssrResult = render(html`
+            #{code}
+          `);
+
+          const _tmplStream = Readable.from(ssrResult)
+
+          let _tmplOutput = ""
+          _tmplStream.on('data', function(chunk) {
+            _tmplOutput += chunk;
+          });
+
+          _tmplStream.on('end',function() {
+            process.stdout.write("====== SSR ======") // marker to ensure stray console outputs don't end up in HTML
+            process.stdout.write(_tmplOutput)
+          });
+        JS
+
+        @code_cache[cache_key] = esbuild(build_code, site)
+      end
+
+      IO.popen(["node"], "r+") do |pipe|
+        pipe.puts "const data = #{data.to_json}; #{@code_cache[cache_key]}"
+        pipe.close_write
+        pipe.read
+      end.partition("====== SSR ======").last.html_safe
+    end
+  end
+
+  class Builder < Bridgetown::Builder
+    def self.cache
+      @cache ||= Bridgetown::Cache.new("LitSSR")
+    end
+
+    def build
+      BridgetownLitRenderer::Renderer.reset_cache
+      helper "lit", helpers_scope: true do |
+        data: {},
+        hydrate_root: true,
+        entry: "./frontend/javascript/lit-components.js",
+        &block
+      |
+        code = view.capture(&block)
+        if hydrate_root
+          code = "<hydrate-root>#{code.sub(%r{\<([a-zA-Z]+-[a-zA-Z-]*)}, "<\\1 defer-hydration")}</hydrate-root>" # rubocop:disable Layout/LineLength
+        end
+
+        if site.config.disable_lit_caching
+          next BridgetownLitRenderer::Renderer.render(code, data: data, entry: entry, site: site)
+        end
+
+        entry_key = entry.start_with?("./") ? File.stat(site.in_root_dir(entry)).mtime : entry
+        BridgetownLitRenderer::Builder.cache.getset("#{code}#{data}#{entry_key}") do
+          BridgetownLitRenderer::Renderer.render(code, data: data, entry: entry, site: site)
+        end
+      end
+    end
+  end
+end
+
+BridgetownLitRenderer::Builder.register

data/lib/bridgetown-lit-renderer/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module BridgetownLitRenderer
+  VERSION = "1.0.0"
+end

data/lib/bridgetown-lit-renderer.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "bridgetown"
+require "bridgetown-lit-renderer/builder"

data/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bridgetown-lit-renderer",
+  "version": "1.0.0",
+  "main": "frontend/javascript/index.js",
+  "exports": {
+    ".": {
+      "browser": {
+        "default": "./frontend/javascript/index.js"
+      }
+    },
+    "./build": {
+      "require": "./src/build.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bridgetownrb/bridgetown-lit-renderer.git"
+  },
+  "author": "Bridgetown Maintainers <maintainers@bridgetownrb.com>",
+  "homepage": "https://www.bridgetownrb.com",
+  "license": "MIT",
+  "private": false,
+  "files": [
+    "frontend",
+    "src"
+  ],
+  "dependencies": {
+    "@webcomponents/template-shadowroot": "^0.1.0",
+    "esbuild": "^0.12"
+  }
+}

data/src/build.js

@@ -0,0 +1,32 @@
+const path = require("path")
+
+module.exports = (esbuildOptions) => {
+  let inputData = [];
+
+  process.stdin.resume();
+  process.stdin.setEncoding('utf8');
+
+  process.stdin.on('data', data => {
+    inputData.push(data)
+  })
+
+  process.stdin.on('end', () => {
+    const inputValues = JSON.parse(inputData.join())
+
+    require('esbuild').build({
+      ...esbuildOptions,
+      stdin: {
+        contents: inputValues.code,
+        resolveDir: process.cwd(),
+        sourcefile: 'lit-ssr-output.js' // imaginary file
+      },
+      platform: "node",
+      inject: [path.join(__dirname, "import-meta-url-shim.js")],
+      define: { "import.meta.url": "import_meta_url" },
+      bundle: true,
+      write: false,
+    }).then(result => {
+      process.stdout.write(result.outputFiles[0].text)
+    }).catch(_e => { })
+  })
+}

data/src/import-meta-url-shim.js

@@ -0,0 +1 @@
+export var import_meta_url = require('url').pathToFileURL(__filename);

data/yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@webcomponents/template-shadowroot@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@webcomponents/template-shadowroot/-/template-shadowroot-0.1.0.tgz#adb3438d0d9a18e8fced08abc253f56b7eadab00"
+  integrity sha512-ry84Vft6xtRBbd4M/ptRodbOLodV5AD15TYhyRghCRgIcJJKmYmJ2v2BaaWxygENwh6Uq3zTfGPmlckKT/GXsQ==
+
+esbuild@^0.12:
+  version "0.12.29"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.29.tgz#be602db7c4dc78944a9dbde0d1ea19d36c1f882d"
+  integrity sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==

metadata

@@ -0,0 +1,120 @@
+--- !ruby/object:Gem::Specification
+name: bridgetown-lit-renderer
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Bridgetown Team
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-09-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bridgetown
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.15'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.15'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '2.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: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop-bridgetown
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+description: 
+email: maintainers@bridgetownrb.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rubocop.yml"
+- CHANGELOG.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bridgetown-lit-renderer.gemspec
+- lib/bridgetown-lit-renderer.rb
+- lib/bridgetown-lit-renderer/builder.rb
+- lib/bridgetown-lit-renderer/version.rb
+- package.json
+- src/build.js
+- src/import-meta-url-shim.js
+- yarn.lock
+homepage: https://github.com/bridgetownrb/bridgetown-lit-renderer
+licenses:
+- MIT
+metadata:
+  yarn-add: bridgetown-lit-renderer@1.0.0
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.5.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: Simple pipeline for SSR + hydration of Lit components
+test_files: []