Updating config and move package to organization

stimulus-components · Mar 20, 2024 · 6e03eab · 6e03eab
1 parent b9100e1
commit 6e03eab
Show file tree

Hide file tree

Showing 15 changed files with 2,541 additions and 2,527 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,4 @@
 {
-  "presets": [
-    "@babel/env",
-    "@babel/preset-typescript"
-  ],
+  "presets": ["@babel/env", "@babel/preset-typescript"],
   "plugins": ["@babel/plugin-transform-typescript"]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,12 +1,15 @@
 // https://eslint.org/docs/user-guide/configuring
 
 module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
   env: {
     browser: true,
     node: true,
-    es6: true
+    es6: true,
+    jest: true,
   },
-  parserOptions: {
-    sourceType: "module"
-  }
+  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+  extends: ["standard", "prettier"],
+  plugins: ["@typescript-eslint"],
 }
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -9,8 +9,8 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version-file: '.node-version'
-          cache: 'yarn'
+          node-version-file: ".node-version"
+          cache: "yarn"
       - run: |
           yarn install --silent --non-interactive
           yarn lint
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-18
+20
diff --git a/.npmignore b/.npmignore
@@ -1,15 +1,14 @@
 .github
+jest
 .babelrc
+jest.config.js
 index.html
 netlify.toml
 .node-version
 .eslintrc.js
-src
-specs
+spec
 tsconfig.json
-vite.config.js
+vite.config.mjs
 .prettierignore
-.prettierrc
-.eslintignore
 postcss.config.js
 tailwind.config.js
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "printWidth": 120
+  "printWidth": 120,
+  "semi": false
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.0.0] - 2024-03-17
+
+### Chore
+
+- Renaming the component from `stimulus-content-loader` to `@stimulus-components/content-loader`
+- Upgrading dependencies
+- Exporting Typescript Types
+- Updating demo UI
+- Add [Stimulus LSP](https://github.com/marcoroth/stimulus-lsp) compatibility
+
 ## [4.2.0] - 2023-08-08
 
 ### Added

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Guillaume Briday
+Copyright (c) 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

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -26,52 +26,35 @@
   </head>
 
   <body>
-    <!-- This example requires Tailwind CSS v2.0+ -->
-    <div class="relative bg-gray-50 overflow-hidden">
-      <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full" aria-hidden="true">
-        <div class="relative h-full max-w-7xl mx-auto">
-          <svg
-            class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2"
-            width="404"
-            height="784"
-            fill="none"
-            viewBox="0 0 404 784"
-          >
-            <defs>
-              <pattern
-                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
-                x="0"
-                y="0"
-                width="20"
-                height="20"
-                patternUnits="userSpaceOnUse"
-              >
-                <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-              </pattern>
-            </defs>
-            <rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
-          </svg>
-          <svg
-            class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2"
-            width="404"
-            height="784"
-            fill="none"
-            viewBox="0 0 404 784"
-          >
-            <defs>
-              <pattern
-                id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
-                x="0"
-                y="0"
-                width="20"
-                height="20"
-                patternUnits="userSpaceOnUse"
-              >
-                <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-              </pattern>
-            </defs>
-            <rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)" />
-          </svg>
+    <div class="relative bg-white overflow-hidden">
+      <div class="relative isolate pt-14">
+        <div
+          class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+          aria-hidden="true"
+        >
+          <div
+            class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-yellow-500 to-orange-500 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+            style="
+              clip-path: polygon(
+                74.1% 44.1%,
+                100% 61.6%,
+                97.5% 26.9%,
+                85.5% 0.1%,
+                80.7% 2%,
+                72.5% 32.5%,
+                60.2% 62.4%,
+                52.4% 68.1%,
+                47.5% 58.3%,
+                45.2% 34.5%,
+                27.5% 76.7%,
+                0.1% 64.9%,
+                17.9% 100%,
+                27.6% 76.8%,
+                76.1% 97.7%,
+                74.1% 44.1%
+              );
+            "
+          ></div>
         </div>
       </div>
 
@@ -90,8 +73,8 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
             </p>
 
             <p class="text-center mt-3">
-              <img class="inline-block" src="https://img.shields.io/npm/dt/stimulus-content-loader.svg" />
-              <img class="inline-block" src="https://img.shields.io/npm/v/stimulus-content-loader.svg" />
+              <img class="inline-block" src="https://img.shields.io/npm/dt/@stimulus-components/content-loader.svg" />
+              <img class="inline-block" src="https://img.shields.io/npm/v/@stimulus-components/content-loader.svg" />
 
               <img
                 class="inline-block"
@@ -118,7 +101,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
                   href="https://github.com/stimulus-components/stimulus-content-loader"
                   class="w-full flex items-center justify-center gap-1 px-8 py-3 border border-transparent text-base font-medium rounded-md bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
                 >
-                  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
+                  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="size-6">
                     <path
                       fill-rule="evenodd"
                       d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
@@ -147,7 +130,6 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       </section>
     </div>
 
-    <!-- This example requires Tailwind CSS v2.0+ -->
     <footer class="bg-white">
       <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
         <div class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
@@ -170,9 +152,11 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
             class="text-gray-400 hover:text-gray-500"
           >
             <span class="sr-only">Twitter</span>
-            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <svg class="size-6" fill="currentColor" viewBox="0 0 512 512">
               <path
-                d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
+                fill-rule="evenodd"
+                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+                clip-rule="evenodd"
               />
             </svg>
           </a>
@@ -184,7 +168,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
             class="text-gray-400 hover:text-gray-500"
           >
             <span class="sr-only">GitHub</span>
-            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path
                 fill-rule="evenodd"
                 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"

diff --git a/package.json b/package.json
@@ -1,9 +1,6 @@
 {
-  "name": "stimulus-content-loader",
+  "name": "@stimulus-components/content-loader",
   "version": "4.2.0",
-  "engines": {
-    "node": "*"
-  },
   "description": "A Stimulus controller to asynchronously load HTML from an url.",
   "keywords": [
     "stimulus",
@@ -21,32 +18,47 @@
   "license": "MIT",
   "homepage": "https://github.com/stimulus-components/stimulus-content-loader",
   "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "dist/stimulus-content-loader.umd.js",
   "module": "dist/stimulus-content-loader.mjs",
+  "types": "dist/types/index.d.ts",
   "scripts": {
-    "format": "prettier-standard  '**/*.{ts,css,html}' --format",
-    "lint": "prettier-standard  '**/*.{ts,css,html}' --lint",
+    "lint": "tsc --noEmit && eslint --ext .js,.mjs,.ts . && prettier . --check",
+    "lintfix": "eslint --ext .js,.mjs,.ts . --fix && prettier . --write",
+    "types": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types",
     "dev": "vite",
     "prod": "vite build --mode netlify",
-    "build": "tsc --noEmit && vite build",
+    "build": "vite build && yarn types",
     "version": "yarn build",
-    "np": "np --no-2fa --no-test"
+    "np": "np --no-2fa --no-tests"
   },
   "devDependencies": {
-    "@babel/core": "7.22.10",
-    "@babel/plugin-syntax-class-properties": "7.12.13",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-typescript": "^7.22.5",
-    "@hotwired/stimulus": "^3.2.2",
-    "autoprefixer": "^10.4.14",
-    "np": "^8.0.4",
-    "postcss": "^8.4.27",
-    "prettier-standard": "16.4.1",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
+    "@babel/core": "7.24.1",
+    "@babel/polyfill": "7.12.1",
+    "@babel/preset-env": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
+    "@hotwired/stimulus": "^3",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "autoprefixer": "10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "17.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-n": "16.6.2",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-standard": "5.0.0",
+    "np": "9.2.0",
+    "postcss": "8.4.37",
+    "prettier": "3.2.5",
+    "tailwindcss": "3.4.1",
+    "typescript": "^5.4.2",
+    "vite": "5.2.0"
   },
   "peerDependencies": {
-    "@hotwired/stimulus": "^3.2.1"
+    "@hotwired/stimulus": "^3.0.0"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-export default class extends Controller {
+export default class ContentLoader extends Controller<HTMLElement> {
   refreshTimer: number
   hasUrlValue: boolean
   hasLazyLoadingValue: boolean
@@ -11,9 +11,6 @@ export default class extends Controller {
   loadScriptsValue: boolean
   refreshIntervalValue: number
 
-  // @ts-ignore
-  element: HTMLElement
-
   static values = {
     url: String,
     lazyLoading: Boolean,
@@ -88,7 +85,7 @@ export default class extends Controller {
         this.dispatch('success')
       })
       .catch(error => {
-        this.dispatch('error', { detail: { error: error } })
+        this.dispatch('error', { detail: { error } })
       })
   }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,3 @@
-module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,8 +2,7 @@
   "compilerOptions": {
     "lib": ["dom", "es6"],
     "types": ["vite/client"],
-    "skipLibCheck": true,
-    "target": "es6",
-    "moduleResolution": "node"
-  }
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules", "spec", "jest"]
 }
diff --git a/vite.config.js → vite.config.mjs b/vite.config.js → vite.config.mjs
@@ -1,5 +1,5 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
+import { resolve } from "path"
+import { defineConfig } from "vite"
 
 export default defineConfig(({ mode }) => {
   if (mode === 'netlify') {
@@ -17,20 +17,23 @@ export default defineConfig(({ mode }) => {
   }
 
   return {
+    esbuild: {
+      minifyIdentifiers: false,
+    },
     build: {
       lib: {
-        entry: resolve(__dirname, 'src/index.ts'),
-        name: 'StimulusContentLoader',
-        fileName: 'stimulus-content-loader'
+        entry: resolve(__dirname, "src/index.ts"),
+        name: "StimulusContentLoader",
+        fileName: "stimulus-content-loader",
       },
       rollupOptions: {
-        external: ['@hotwired/stimulus'],
+        external: ["@hotwired/stimulus"],
         output: {
           globals: {
-            '@hotwired/stimulus': 'Stimulus'
-          }
-        }
-      }
-    }
+            "@hotwired/stimulus": "Stimulus",
+          },
+        },
+      },
+    },
   }
 })