Initial commit

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+pkg

.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'
+  }
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+patreon: guillaumebriday

.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

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+pkg
+build

.node-version

@@ -0,0 +1 @@
+14.13.0

.npmignore

@@ -0,0 +1,10 @@
+.github
+jest
+.babelrc
+jest.config.js
+index.html
+snowpack.config.json
+netlify.toml
+.node-version
+.eslintrc.js
+src

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

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

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.

README.md

@@ -0,0 +1,90 @@
+# Stimulus Timeago
+
+[![](https://img.shields.io/npm/dt/stimulus-timeago.svg)](https://www.npmjs.com/package/stimulus-timeago)
+[![](https://img.shields.io/npm/v/stimulus-timeago.svg)](https://www.npmjs.com/package/stimulus-timeago)
+[![](https://github.com/stimulus-components/stimulus-timeago/workflows/Lint/badge.svg)](https://github.com/stimulus-components/stimulus-timeago)
+[![](https://img.shields.io/github/license/stimulus-components/stimulus-timeago.svg)](https://github.com/stimulus-components/stimulus-timeago)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/073b5fee-358d-4dbf-b807-52034690f8ef/deploy-status)](https://stimulus-timeago.netlify.com)
+
+## Getting started
+
+A Stimulus controller that returns the distance between the given date and now in words.
+
+## Installation
+
+```bash
+$ yarn add stimulus-timeago
+```
+
+And use it in your JS file:
+```js
+import { Application } from "stimulus"
+import Timeago from "stimulus-timeago"
+
+const application = Application.start()
+application.register("timeago", Timeago)
+```
+
+## Usage
+
+In your view:
+```html
+<p>
+  Stimulus 1.0.0 was released
+  <time data-controller="timeago" data-timeago-datetime="2018-01-30 09:00"></time>.
+</p>
+```
+
+## Configuration
+
+| Attribute | Default | Description | Optional |
+| --------- | ------- | ----------- | -------- |
+| `data-timeago-datetime` | `undefined` | Delay before autogrow on resize in milliseconds (0 to disable). | ❌ |
+| `data-timeago-refresh-interval` | `undefined` | Delay before autogrow on resize in milliseconds (0 to disable). | ✅ |
+| `data-timeago-include-seconds` | `false` | Delay before autogrow on resize in milliseconds (0 to disable). | ✅ |
+| `data-timeago-add-suffix` | `false` | Delay before autogrow on resize in milliseconds (0 to disable). | ✅ |
+
+`includeSeconds` and `addSuffix` are the options of the [date-fns/formatDistanceToNow](https://date-fns.org/v2.2.1/docs/formatDistanceToNow) method.
+
+
+## Extending Controller
+
+You can use inheritance to extend the functionality of any Stimulus components.
+
+```js
+import Timeago from "stimulus-timeago"
+
+export default class extends Timeago {
+  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
+```
+
+## 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.

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 Timeago</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 Timeago from './src/index.js'
+
+      const application = Stimulus.Application.start()
+      application.register('timeago', Timeago)
+    </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 Timeago</h1>
+
+      <p class="text-center mb-4">
+        A Stimulus controller that returns the distance between the given date and now in words.
+      </p>
+
+      <p class="text-center badges">
+        <a href="https://www.npmjs.com/package/stimulus-timeago">
+          <img src="https://img.shields.io/npm/dt/stimulus-timeago.svg" />
+        </a>
+
+        <a href="https://www.npmjs.com/package/stimulus-timeago">
+          <img src="https://img.shields.io/npm/v/stimulus-timeago.svg" />
+        </a>
+
+        <a href="https://github.com/stimulus-components/stimulus-timeago">
+          <img src="https://github.com/stimulus-components/stimulus-timeago/workflows/Lint/badge.svg" />
+        </a>
+
+        <a href="https://github.com/stimulus-components/stimulus-timeago">
+          <img src="https://img.shields.io/github/license/stimulus-components/stimulus-timeago.svg" />
+        </a>
+
+        <a href="https://stimulus-timeago.netlify.com/">
+          <img src="https://api.netlify.com/api/v1/badges/073b5fee-358d-4dbf-b807-52034690f8ef/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-timeago" target="_blank" rel="noopener">
+            Github
+          </a>
+        </li>
+
+        <li>
+          <a href="https://www.npmjs.com/package/stimulus-timeago" target="_blank" rel="noopener">
+            Npm
+          </a>
+        </li>
+      </ul>
+
+      <section class="mt-16">
+        Stimulus 1.0.0 was released
+        <time
+          data-controller="timeago"
+          data-timeago-datetime="2018-01-30 09:00"
+          data-timeago-refresh-interval="1000"
+          data-timeago-include-seconds=""
+          data-timeago-add-suffix=""
+        ></time
+        >.
+      </section>
+    </div>
+  </body>
+</html>

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  publish="build"
+  command="yarn prod"

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "stimulus-timeago",
+  "version": "0.1.0",
+  "description": "A Stimulus controller that returns the distance between the given date and now in words.",
+  "repository": "git@github.com:stimulus-components/stimulus-timeago.git",
+  "author": "Guillaume Briday <guillaumebriday@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/stimulus-components/stimulus-timeago",
+  "private": false,
+  "esnext": "dist-src/index.js",
+  "main": "dist-node/index.js",
+  "module": "dist-web/index.js",
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-standard-pkg"
+      ],
+      [
+        "@pika/plugin-build-web"
+      ],
+      [
+        "@pika/plugin-build-node"
+      ]
+    ]
+  },
+  "scripts": {
+    "format": "prettier-standard  '**/*.{js,css,html}' --format",
+    "lint": "prettier-standard  '**/*.{js,css,html}' --lint",
+    "dev": "snowpack dev",
+    "prod": "snowpack build",
+    "build": "pika build",
+    "pika:publish": "pika publish --no-tests --no-2fa",
+    "version": "yarn build"
+  },
+  "dependencies": {
+    "date-fns": "^2.16.1",
+    "stimulus": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.11.6",
+    "@babel/plugin-syntax-class-properties": "7.10.4",
+    "@babel/preset-env": "7.11.5",
+    "@pika/pack": "0.5.0",
+    "@pika/plugin-build-node": "0.9.2",
+    "@pika/plugin-build-web": "0.9.2",
+    "@pika/plugin-standard-pkg": "0.9.2",
+    "@snowpack/plugin-babel": "2.1.3",
+    "prettier-standard": "16.4.1",
+    "snowpack": "2.14.0"
+  }
+}

snowpack.config.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    [
+      "@snowpack/plugin-babel"
+    ]
+  ]
+}

src/index.js

@@ -0,0 +1,39 @@
+import { Controller } from 'stimulus'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+
+export default class extends Controller {
+  connect () {
+    this.load()
+
+    if (this.data.has('refreshInterval')) {
+      this.startRefreshing()
+    }
+  }
+
+  disconnect () {
+    this.stopRefreshing()
+  }
+
+  load () {
+    const date = this.data.get('datetime')
+    const options = {
+      includeSeconds: this.data.has('includeSeconds') || false,
+      addSuffix: this.data.has('addSuffix') || false
+    }
+
+    this.element.dateTime = date
+    this.element.innerHTML = formatDistanceToNow(Date.parse(date), options)
+  }
+
+  startRefreshing () {
+    this.refreshTimer = setInterval(() => {
+      this.load()
+    }, this.data.get('refreshInterval'))
+  }
+
+  stopRefreshing () {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+    }
+  }
+}