Initial commit

guillaumebriday · guillaumebriday · commit 6505b6462a10 · 2020-10-15T21:09:18.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,13 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+
+  globals: {
+    page: 'readonly'
+  }
+}
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+patreon: guillaumebriday
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -0,0 +1,15 @@
+name: Lint
+
+on: [push]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - run: |
+          yarn install
+          yarn lint
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+pkg
+build
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+14.13.0
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,8 @@
+.github
+.babelrc
+index.html
+snowpack.config.json
+netlify.toml
+.node-version
+.eslintrc.js
+src
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,13 @@
+# 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] - 2020-10-15
+
+### Added
+
+- Adding controller
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Guillaume Briday
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,156 @@
+# Stimulus components
+
+[![](https://img.shields.io/npm/dt/stimulus-content-loader.svg)](https://www.npmjs.com/package/stimulus-content-loader)
+[![](https://img.shields.io/npm/v/stimulus-content-loader.svg)](https://www.npmjs.com/package/stimulus-content-loader)
+[![](https://github.com/stimulus-components/stimulus-content-loader/workflows/Lint/badge.svg)](https://github.com/stimulus-components/stimulus-content-loader)
+[![](https://github.com/stimulus-components/stimulus-content-loader/workflows/Test/badge.svg)](https://github.com/stimulus-components/stimulus-content-loader)
+[![](https://img.shields.io/github/license/stimulus-components/stimulus-content-loader.svg)](https://github.com/stimulus-components/stimulus-content-loader)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/056dda4a-4444-4c24-a854-c4b1944d35ca/deploy-status)](https://stimulus-content-loader.netlify.com)
+
+## Getting started
+
+A Stimulus controller to asynchronously load HTML from an url.
+
+## Installation
+
+```bash
+$ yarn add stimulus-content-loader
+```
+
+And use it in your JS file:
+```js
+import { Application } from "stimulus"
+import ContentLoader from "stimulus-content-loader"
+
+const application = Application.start()
+application.register("content-loader", ContentLoader)
+```
+
+## Usage
+
+In your controller:
+```ruby
+class PostsController < ApplicationController
+  def comments
+    render partial: 'posts/comments', locals: { comments: @post.comments }
+  end
+end
+```
+
+In your routes:
+```ruby
+Rails.application.routes.draw do
+ressources
+  get :comments, to: 'posts#comments'
+end
+```
+
+In your view:
+```html
+<div
+  data-controller="content-loader"
+  data-content-loader-url="<%= comments_path %>"
+>
+  <i class="fas fa-spinner fa-spin"></i> Loading comments...
+
+  This content will be replaced by the content of the `posts/comments` partial generated by Rails.
+</div>
+
+<div
+  data-controller="content-loader"
+  data-content-loader-url="<%= comments_path %>"
+  data-content-loader-refresh-interval="5000"
+>
+  This content will be reloaded every 5 seconds.
+</div>
+
+<div
+  data-controller="content-loader"
+  data-content-loader-url="/message.html"
+>
+  This content will be replaced by the content of the `/message.html` page in your public folder.
+</div>
+
+<div
+  data-controller="content-loader"
+  data-content-loader-url="/message.html"
+  data-content-loader-lazy-loading=""
+>
+  This content will be replaced only when the element become visible thanks to Intersection Observers.
+</div>
+
+<div
+  data-controller="content-loader"
+  data-content-loader-url="/message.html"
+  data-content-loader-lazy-loading=""
+  data-content-loader-lazy-loading-root-margin="30px"
+  data-content-loader-lazy-loading-threshold="0.4"
+>
+  You can customize the Intersection Observer options.
+</div>
+
+<div
+  data-controller="content-loader"
+  data-content-loader-url="/message.html"
+  data-content-loader-lazy-loading=""
+  data-content-loader-refresh-interval="5000"
+>
+  You can combine lazy loading and refresh interval. The timer will start only after the first fetch.
+</div>
+```
+
+## Configuration
+
+| Attribute | Default | Description | Optional |
+| --------- | ------- | ----------- | -------- |
+| `data-content-loader-refresh-interval` | `undefined` | Interval in milliseconds to reload content. | ✅ |
+| `data-content-loader-lazy-loading` | `undefined` | Fetch content when element is visible. | ✅ |
+| `data-content-loader-lazy-loading-root-margin` | `0px` | rootMargin option for Intersection Observer. | ✅ |
+| `data-content-loader-lazy-loading-threshold` | `0` | threshold option for Intersection Observer. | ✅ |
+
+
+## Extending Controller
+
+You can use inheritance to extend the functionality of any Stimulus components.
+
+```js
+import ContentLoader from "stimulus-content-loader"
+
+export default class extends ContentLoader {
+  connect() {
+    super.connect()
+    console.log("Do what you cant here.")
+  }
+}
+```
+
+These controllers will automatically have access to targets defined in the parent class.
+
+If you override the connect, disconnect or any other methods from the parent, you'll want to call `super.method()` to make sure the parent functionality is executed.
+
+## Development
+
+### Project setup
+```bash
+$ yarn install
+$ yarn dev
+```
+
+### Linter
+[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are responsible to lint and format this component:
+```bash
+$ yarn lint
+$ yarn format
+```
+
+## Credits
+
+This controller is inspired by the [official Stimulus example](https://stimulusjs.org/handbook/working-with-external-resources).
+
+## Contributing
+
+Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
+
+## License
+
+This project is released under the [MIT](http://opensource.org/licenses/MIT) license.
diff --git a/index.html b/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <title>Stimulus Content Loader</title>
+    <script type="module" src="./src/index.js" defer></script>
+    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js" defer></script>
+
+    <script type="module" defer>
+      import ContentLoader from './src/index.js'
+
+      const application = Stimulus.Application.start()
+      application.register('content-loader', ContentLoader)
+    </script>
+
+    <style>
+      ul {
+        list-style-type: none;
+        padding: 0;
+      }
+
+      li {
+        display: inline-block;
+        margin: 0 10px;
+      }
+
+      a {
+        color: #667eea;
+        display: inline-block;
+      }
+
+      .badges a {
+        margin: 0 0.25rem;
+      }
+
+      pre code {
+        border-radius: 0.5rem;
+        text-align: left;
+        font-family: Menlo, 'Courier New', Courier, monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="w-full max-w-6xl mx-auto my-24 p-4">
+      <h1 class="text-center mb-8 text-5xl font-bold">Stimulus Content Loader</h1>
+
+      <p class="text-center mb-4">
+        A Stimulus controller to asynchronously load HTML from an url.
+      </p>
+
+      <p class="text-center badges">
+        <a href="https://www.npmjs.com/package/stimulus-content-loader">
+          <img src="https://img.shields.io/npm/dt/stimulus-content-loader.svg" />
+        </a>
+
+        <a href="https://www.npmjs.com/package/stimulus-content-loader">
+          <img src="https://img.shields.io/npm/v/stimulus-content-loader.svg" />
+        </a>
+
+        <a href="https://github.com/stimulus-components/stimulus-content-loader">
+          <img src="https://github.com/stimulus-components/stimulus-content-loader/workflows/Lint/badge.svg" />
+        </a>
+
+        <a href="https://github.com/stimulus-components/stimulus-content-loader">
+          <img src="https://github.com/stimulus-components/stimulus-content-loader/workflows/Test/badge.svg" />
+        </a>
+
+        <a href="https://github.com/stimulus-components/stimulus-content-loader">
+          <img src="https://img.shields.io/github/license/stimulus-components/stimulus-content-loader.svg" />
+        </a>
+
+        <a href="https://stimulus-components.netlify.com/">
+          <img src="https://api.netlify.com/api/v1/badges/056dda4a-4444-4c24-a854-c4b1944d35ca/deploy-status" />
+        </a>
+      </p>
+
+      <h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
+
+      <ul class="text-center mb-8">
+        <li>
+          <a href="https://github.com/stimulus-components/stimulus-content-loader" target="_blank" rel="noopener">
+            Github
+          </a>
+        </li>
+
+        <li>
+          <a href="https://www.npmjs.com/package/stimulus-content-loader" target="_blank" rel="noopener">
+            Npm
+          </a>
+        </li>
+      </ul>
+
+      <section class="mt-16">
+        <h2 class="text-2xl font-bold mb-4">
+          Content loader Controller
+        </h2>
+
+        <div data-controller="content-loader" data-content-loader-url="/message.html"></div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/message.html b/message.html
@@ -0,0 +1 @@
+<p>This partial has been lazy-loaded from <a href="/message.html">/message.html</a>.</p>
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,3 @@
+[build]
+  publish="build"
+  command="yarn prod"
diff --git a/package.json b/package.json
diff --git a/snowpack.config.json b/snowpack.config.json
diff --git a/src/index.js b/src/index.js
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "plugins": [
 +    "@babel/plugin-proposal-class-properties"
 +  ]
 +}