FEATURE: factor out tonic

substrate-system · May 21, 2024 · cfa9bbd · cfa9bbd
1 parent ff75085
commit cfa9bbd
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -21,25 +21,17 @@ npm i -S @bicycle-codes/scroll-progress
 You've got options.
 
 ### Bundler
-Use this with a bundler by using `import` syntax, and calling and `Tonic.add`:
+Use this with a bundler by using `import` syntax.
 
 ```js
-import Tonic from '@bicycle-codes/tonic'
-import { ScrollProgress } from '@bicycle-codes/scroll-progress'
-import '@bicycle-codes/scroll-progress/index.css'
-
-function ScrollExample () {
-    return this.html`
-        <scroll-progress class="scroll example" id="example"></scroll-progress>
-    `
-}
-
-Tonic.add(ScrollProgress)
-Tonic.add(ScrollExample)
+import '@bicycle-codes/scroll-progress'
+import '@bicycle-codes/scroll-progress/css'
+// or minified css
+import '@bicycle-codes/scroll-progress/min/css'
 ```
 
 ### pre-bundled
-First copy the bundled file to a location that is accessible to your web server:
+This is the progress component and its one dependency, [raf-scroll](https://github.com/bicycle-codes/raf-scroll), combined into a single file. First copy the bundled file to a location that is accessible to your web server:
 
 ```sh
 cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.js ./public/scroll-progress.js
@@ -81,40 +73,28 @@ Override the variable `--scroll-progress-color` to customize the color.
 
 ## examples
 
-### JS
-
 ```js
-// index.ts
-import Tonic from '@bicycle-codes/tonic'
+// index.js
 import { ScrollProgress } from '@bicycle-codes/scroll-progress'
-import '@bicycle-codes/scroll-progress.css'
-
-function ScrollExample () {
-    return this.html`
-        <scroll-progress class="scroll example" id="example"></scroll-progress>
-    `
-}
-
-Tonic.add(ScrollProgress)
-Tonic.add(ScrollExample)
-
-/*
+```
 
-in HTML, you would link to your compiled file, then use the root
-element as an HTML element:
-<div id="root">
-    <scroll-example></scroll-example>
-</div>
-<script type="module" src="./index.ts"></script>
+```html
+<!-- index.html -->
+<body>
+    <div id="root">
+        <scroll-example></scroll-example>
+    </div>
 
-*/
+    <script type="module" src="./index.js"></script>
+</body>
 ```
 
-### HTML
+### pre-bundled
 First copy a bundled file to a place where your webserver can access it.
 
 ```sh
 cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.min.js ./public/scroll-progress.js
+cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.min.css ./public/scroll-progress.css
 ```
 
 Then include a script tag in HTML, and use the component like any other HTML element.
@@ -125,12 +105,18 @@ Then include a script tag in HTML, and use the component like any other HTML ele
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- link to the css -->
+    <link rel="stylesheet" href="./scroll-progress.css">
     <title>Example</title>
 </head>
+
 <body>
     <div id="root">
         <scroll-progress></scroll-progress>
     </div>
+
+    <!-- link to JS -->
     <script type="module" src="./scroll-progress.js"></script>
 </body>
 </html>

diff --git a/example/index.css b/example/index.css
@@ -1,8 +1,3 @@
 body {
     height: 300vh;
-
-    & meter {
-        width: 300px;
-        height: 20px;
-    }
 }
diff --git a/example/index.html b/example/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
     <div id="root">
-        <scroll-example></scroll-example>
+        <scroll-progress></scroll-progress>
     </div>
     <script type="module" src="./index.ts"></script>
 </body>

diff --git a/example/index.ts b/example/index.ts
@@ -1,14 +1,3 @@
-import Tonic from '@bicycle-codes/tonic'
-import { ScrollProgress } from '../src/index.js'
-import './index.css'
+import '../src/index.js'
 import '../src/index.css'
-
-function ScrollExample () {
-    // @ts-expect-error broken upstream
-    return this.html`
-        <scroll-progress class="scroll example" id="example"></scroll-progress>
-    `
-}
-
-Tonic.add(ScrollProgress)
-Tonic.add(ScrollExample)
+import './index.css'
diff --git a/package.json b/package.json
@@ -18,11 +18,12 @@
     "test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-arc",
     "build-cjs": "esbuild src/index.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
     "build-esm": "tsc --project tsconfig.build.json",
-    "build-bundle": "esbuild --keep-names --bundle --tsconfig=tsconfig.build.json --outfile=./dist/index.bundle.js ./src/bundle.ts",
-    "build-bundle:min": "esbuild --keep-names --bundle --tsconfig=tsconfig.build.json --minify --outfile=./dist/index.bundle.min.js ./src/bundle.ts",
+    "build-bundle": "esbuild ./src/index.ts --keep-names --bundle --tsconfig=tsconfig.build.json --outfile=./dist/index.bundle.js",
+    "build-bundle:min": "esbuild ./src/index.ts --keep-names --bundle --tsconfig=tsconfig.build.json --minify --outfile=./dist/index.bundle.min.js",
     "build-example": "vite --base \"/scroll-progress/\" build",
-    "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-bundle && npm run build-bundle:min && npm run build-css",
-    "build-css": "cp ./src/index.css dist",
+    "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-bundle && npm run build-bundle:min && npm run build-css && npm run build-css:min",
+    "build-css": "cp ./src/index.css dist/index.css",
+    "build-css:min": "postcss src/index.css --use cssnano > dist/index.min.css",
     "start": "vite",
     "preversion": "npm run lint",
     "version": "auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md",
@@ -34,9 +35,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./*.css": [
+    "./css": [
       "./dist/index.css"
     ],
+    "./min/css": [
+      "./dist/index.min.css"
+    ],
     "./bundle": [
       "./dist/index.bundle.js"
     ],
@@ -55,26 +59,27 @@
     }
   },
   "dependencies": {
-    "@bicycle-codes/raf-scroll": "^0.0.2",
-    "@bicycle-codes/tonic": "^15.4.11"
+    "@bicycle-codes/raf-scroll": "^0.0.2"
   },
   "devDependencies": {
     "@bicycle-codes/tapzero": "^0.9.2",
     "@nichoth/debug": "^0.6.7",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "auto-changelog": "^2.4.0",
+    "cssnano": "^7.0.1",
     "esbuild": "^0.20.1",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "gh-release": "^7.0.2",
+    "postcss-cli": "^11.0.0",
     "postcss-nesting": "^12.0.3",
     "tap-arc": "^1.2.2",
     "tape-run": "^11.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.1.6"
   },
-  "author": "nichoth <nichoth@gmail.com> (https://nichoth.com)",
+  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "repository": {

diff --git a/src/bundle.ts b/src/bundle.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,14 +1,15 @@
-import Tonic from '@bicycle-codes/tonic'
 import { rafScroll } from '@bicycle-codes/raf-scroll'
 
-export class ScrollProgress extends Tonic {
+export class ScrollProgress extends HTMLElement {
     next:(()=>any)|null = null
     ticking = false
 
     constructor () {
         super()
+        const classes = 'scroll-progress'
+
         const offset = (window.scrollY /
-            (document.body.offsetHeight - window.innerHeight))
+        (document.body.offsetHeight - window.innerHeight))
 
         this.style.setProperty('--scroll',
             (Math.round(offset * 100 * 100) / 100 + 'vw'))
@@ -40,14 +41,9 @@ export class ScrollProgress extends Tonic {
 
             this.next && this.next()
         })
-    }
 
-    render () {
-        const classes = (['scroll-progress'])
-            .concat((this.props.class || '').split(' '))
-            .filter(Boolean)
-            .join(' ')
-
-        return this.html`<div class="${classes}"></div>`
+        this.innerHTML = `<div class=${classes}></div>`
     }
 }
+
+customElements.define('scroll-progress', ScrollProgress)