webpacker-svelte 0.0.0

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Renaud Chaput
+
+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,195 @@
+# Webpacker-Svelte [![CircleCI](https://circleci.com/gh/will-wow/webpacker-svelte.svg?style=svg)](https://circleci.com/gh/will-wow/webpacker-svelte)
+
+_**Note:** This is the documentation for the Git master branch. Documentation for the latest release (0.0.0) is [available here](https://github.com/will-wow/webpacker-svelte/tree/v0.0.0)._
+
+Webpacker-Svelte makes it easy to use [Svelte](https://svelte.dev) with [Webpacker](https://github.com/rails/webpacker) in your Rails applications.
+
+This is a port of [@renchap](https://github.com/renchap)'s excellent [webpacker-react](https://github.com/renchap/webpacker-react).
+
+It supports Webpacker 1.2+.
+
+An example application is available: https://github.com/will-wow/svelte-on-rails/
+
+## Installation
+
+Your Rails application needs to use Webpacker and have the Svelte integration done. Please refer to their documentation documentation for this: https://github.com/rails/webpacker/blob/master/README.md#svelte
+
+First, you need to add the webpacker-svelte gem to your Rails app Gemfile:
+
+```ruby
+gem 'webpacker-svelte', "~> 0.0.0"
+```
+
+Once done, run `bundle` to install the gem.
+
+Then you need to update your `package.json` file to include the `webpacker-svelte` NPM module:
+
+`./bin/yarn add webpacker-svelte`
+
+You are now all set!
+
+### Note about versions
+
+Webpacker-Svelte contains two parts: a Javascript module and a Ruby gem. Both of those components respect [semantic versioning](http://semver.org). **When upgrading the gem, you need to upgrade the NPM module to the same minor version**. New patch versions can be released for each of the two independently, so it is ok to have the NPM module at version `A.X.Y` and the gem at version `A.X.Z`, but you should never have a different `A` or `X`.
+
+## Usage
+
+The first step is to register your root components (those you want to load from your HTML).
+In your pack file (`app/javascript/packs/*.js`), import your components as well as `webpacker-svelte` and register them. Considering you have a component in `app/javascript/components/hello.js`:
+
+```javascript
+import Hello from "components/hello.svelte";
+import WebpackerSvelte from "webpacker-svelte";
+
+WebpackerSvelte.setup({ Hello }); // ES6 shorthand for {Hello: Hello}
+```
+
+### With Turbolinks
+
+You have to make sure Turbolinks is loaded before calling `WebpackerSvelte.initialize()`.
+
+For example:
+
+```javascript
+import Hello from "components/hello.svelte";
+import WebpackerSvelte from "webpacker-svelte";
+import Turbolinks from "turbolinks";
+
+Turbolinks.start();
+
+WebpackerSvelte.setup({ Hello });
+```
+
+You may also load turbolinks in regular asset pipeline `application.js`:
+
+```javascript
+//= require "turbolinks"
+```
+
+In that case, make sure your packs are loaded _after_ `application.js`
+
+Now you can render Svelte components from your views or your controllers.
+
+### Rendering from a view
+
+Use the `svelte_component` helper. The first argument is your component's name, the second one is the `props`:
+
+```erb
+<%= svelte_component('Hello', name: 'Svelte') %>
+```
+
+You can pass a `tag` argument to render the Svelte component in another tag than the default `div`. All other arguments will be passed to `content_tag`:
+
+```erb
+<%= svelte_component('Hello', { name: 'Svelte' }, tag: :span, class: 'my-custom-component') %>
+# This will render <span class="my-custom-component" data-svelte-component="Hello" data-svelte-props="..."></span>
+```
+
+### Rendering from a controller
+
+```rb
+class PageController < ApplicationController
+  def main
+    render svelte_component: 'Hello', props: { name: 'Svelte' }
+  end
+end
+```
+
+You can use the `tag_options` argument to change the generated HTML, similar to the `svelte_component` method above:
+
+```rb
+render svelte_component: 'Hello', props: { name: 'Svelte' }, tag_options: { tag: :span, class: 'my-custom-component' }
+```
+
+You can also pass any of the usual arguments to `render` in this call: `layout`, `status`, `content_type`, etc.
+
+_Note: you need to have [Webpack process your code](https://github.com/rails/webpacker#binstubs) before it is available to the browser, either by manually running `./bin/webpack` or having the `./bin/webpack-watcher` process running._
+
+### Hot Module Replacement
+
+**HRM isn't working for Svelte3 yet. See: https://github.com/sveltejs/svelte-loader/issues/74**
+
+[HMR](https://webpack.js.org/concepts/hot-module-replacement/) allows to reload / add / remove modules live in the browser without
+reloading the page. This allows any change you make to your Svelte components to be applied as soon as you save,
+preserving their current state.
+
+**Once svelte-loader supports HMR for Svelte 3:**
+
+1. Set up the webpack svelte loader `svelte` for HMR.
+
+   ```javascript
+   module.exports = {
+     test: /\.svelte$/,
+     use: [
+       {
+         loader: "svelte-loader",
+         options: {
+           // HMR isn't supported for Svelte3 yet
+           //  https://github.com/sveltejs/svelte-loader/issues/74
+           hotReload: true
+         }
+       }
+     ]
+   };
+   ```
+
+1. Set up `webpack-dev-server` for HMR. This is easy, just switch `hmr: true` in your `webpacker.yml` for development!
+
+1. you now need to use `webpack-dev-server` (in place of `webpack` or `webpack-watcher`).
+
+## Development
+
+To work on this gem locally, you first need to clone and setup [the example application](https://github.com/will-wow/svelte-on-rails).
+
+Then you need to change the example app Gemfile to point to your local repository and run bundle afterwise:
+
+```ruby
+gem 'webpacker-svelte', path: '~/code/webpacker-svelte/'
+```
+
+Finally, you need to tell Yarn to use your local copy of the NPM module in this application, using [`yarn link`](https://yarnpkg.com/en/docs/cli/link):
+
+```
+$ cd ~/code/webpacker-svelte/javascript/webpacker_svelte-npm-module/
+$ yarn
+$ cd dist/
+$ yarn             # compiles the code from src/ to dist/
+$ yarn link
+success Registered "webpacker-svelte".
+info You can now run `yarn link "webpacker-svelte"` in the projects where you want to use this module and it will be used instead.
+$ cd ~/code/svelte-on-rails/
+$ yarn link webpacker-svelte
+success Registered "webpacker-svelte".
+```
+
+After launching `./bin/webpack-watcher` and `./bin/rails server` in your example app directory, you can now change the Ruby or Javascript code in your local `webpacker-svelte` repository, and test it immediately using the example app.
+
+## Testing
+
+If you changed the local javascript package, first ensure it is build (see above).
+
+To run the test suite:
+
+```sh
+$ rake test
+```
+
+If you change the javascript code, please ensure there are no style errors before committing:
+
+```sh
+$ cd javascript/webpacker_svelte-npm-module/
+$ yarn lint
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/will-wow/webpacker-svelte.
+Please feel free to open issues about your needs and features you would like to be added.
+
+## Wishlist
+
+- [ ] server-side rendering (#3)
+
+### Thanks
+
+All credit to [@renchap](https://github.com/renchap) for [webpacker-react](https://github.com/renchap/webpacker-react), this is just a light re-write of that repo to support Svelte!

data/Rakefile

@@ -0,0 +1,34 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+require "English"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+  t.verbose = true
+end
+
+task default: :test
+
+# webpacker:check_webpack_binstubs is looking for binstubs
+# in the gem root directory. We need to disable it for our
+# tests, as it tries to check they exist when loading the
+# example app
+
+task "webpacker:check_webpack_binstubs"
+Rake::Task["webpacker:check_webpack_binstubs"].clear
+
+namespace :example_app do
+  desc "Runs yarn in test/example_app"
+  task :yarn do
+    sh "cd test/example_app && yarn"
+  end
+
+  desc "Runs webpack in test/example_app"
+  task webpack: :yarn do
+    sh "cd test/example_app && RAILS_ENV=test ./bin/webpack"
+  end
+end
+
+Rake::Task["test"].enhance ["example_app:webpack"]

data/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "webpacker/svelte"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/javascript/webpacker_svelte-npm-module/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [["env", {
+    "targets": {
+      "browsers": ["> 1%", "last 2 versions"]
+    }
+  }]]
+}

data/javascript/webpacker_svelte-npm-module/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  extends: ['airbnb-base', 'prettier'],
+  rules: {
+    'comma-dangle': ['error', 'never'],
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': 'off',
+    'no-console': 'off',
+    'no-new': 'off',
+    semi: ['error', 'never']
+  },
+  env: {
+    browser: true,
+    node: true
+  }
+}

data/javascript/webpacker_svelte-npm-module/.prettierignore

@@ -0,0 +1 @@
+dist/

data/javascript/webpacker_svelte-npm-module/README.md

@@ -0,0 +1,5 @@
+# webpacker-svelte
+
+Javascript part for the `webpacker_svelte` Ruby gem.
+
+Please see the project homepage for more details : https://github.com/will-wow/webpacker-svelte

data/javascript/webpacker_svelte-npm-module/dist/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "webpacker-svelte",
+  "version": "0.0.0",
+  "description": "Javascript",
+  "main": "index.js",
+  "homepage": "https://github.com/will-wow/webpacker-svelte",
+  "repository": "will-wow/webpacker-svelte",
+  "author": {
+    "name": "Will Ockelmann-Wagner",
+    "email": "will.ockelmann.wagner@gmail.com"
+  },
+  "peerDependencies": {
+    "svelte": ">= 3"
+  },
+  "files": [
+    "index.js",
+    "ujs.js"
+  ],
+  "scripts": {
+    "prepublish": "cd .. ; yarn run build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "webpack-merge": "^4.1.1"
+  }
+}

data/javascript/webpacker_svelte-npm-module/dist/yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lodash@^4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+webpack-merge@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"
+  dependencies:
+    lodash "^4.17.4"

data/javascript/webpacker_svelte-npm-module/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "webpacker-svelte-build",
+  "private": true,
+  "scripts": {
+    "build": "babel src --out-dir dist",
+    "lint": "npm-run-all -c lint:*",
+    "lint:prettier": "prettier --check '**/*.{js,json,md,svelte}'",
+    "lint:eslint": "eslint src/",
+    "format": "npm-run-all -c format:*",
+    "format:eslint": "eslint --fix src/",
+    "format:prettier": "prettier --write '**/*.{js,json,md,svelte}'"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.18.2"
+  },
+  "dependencies": {
+    "lodash": "^4.0.0"
+  }
+}

data/javascript/webpacker_svelte-npm-module/prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  semi: false,
+  singleQuote: true
+}

data/javascript/webpacker_svelte-npm-module/src/index.js

@@ -0,0 +1,70 @@
+import intersection from 'lodash/intersection'
+import keys from 'lodash/keys'
+import assign from 'lodash/assign'
+import omit from 'lodash/omit'
+import ujs from './ujs'
+
+const CLASS_ATTRIBUTE_NAME = 'data-svelte-component'
+const PROPS_ATTRIBUTE_NAME = 'data-svelte-props'
+
+const noop = () => {}
+
+const WebpackerSvelte = {
+  registeredComponents: {},
+
+  render(node, Component) {
+    const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
+    const props = propsJson && JSON.parse(propsJson)
+
+    new Component({
+      target: node,
+      props
+    })
+  },
+
+  registerComponents(components) {
+    const collisions = intersection(
+      keys(this.registeredComponents),
+      keys(components)
+    )
+    if (collisions.length > 0) {
+      console.error(
+        `webpacker-svelte: can not register components. Following components are already registered: ${collisions}`
+      )
+    }
+
+    assign(this.registeredComponents, omit(components, collisions))
+    return true
+  },
+
+  mountComponents() {
+    const { registeredComponents } = this
+    const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
+
+    for (let i = 0; i < toMount.length; i += 1) {
+      const node = toMount[i]
+      const className = node.getAttribute(CLASS_ATTRIBUTE_NAME)
+      const component = registeredComponents[className]
+
+      if (component) {
+        if (node.innerHTML.length === 0) this.render(node, component)
+      } else {
+        console.error(
+          `webpacker-svelte: can not render a component that has not been registered: ${className}`
+        )
+      }
+    }
+  },
+
+  setup(components = {}) {
+    if (typeof window.WebpackerSvelte === 'undefined') {
+      window.WebpackerSvelte = this
+      ujs.setup(this.mountComponents.bind(this), noop)
+    }
+
+    window.WebpackerSvelte.registerComponents(components)
+    window.WebpackerSvelte.mountComponents()
+  }
+}
+
+export default WebpackerSvelte