new tests; new split with core and solid packages (#1)

.github/workflows/publish.yml

@@ -0,0 +1,80 @@
+name: Publish
+on:
+  push:
+    branches:
+      - main
+      - next
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.1
+
+      - name: format
+        run: deno fmt --check
+
+      - name: lint
+        run: deno lint
+
+      - name: test
+        run: deno test -A
+
+  publish_npm:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - name: Install Deno
+        uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.1
+
+      - name: Publish package dry-run
+        if: ${{ !startsWith(github.ref, 'refs/tags/') }}
+        run: scripts/publish_npm.ts --dry-run
+
+      - name: Publish package
+        if: ${{ startsWith(github.ref, 'refs/tags/') }}
+        run: scripts/publish_npm.ts
+
+  publish_jsr:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v2
+        with:
+          deno-version: v2.1
+
+      - name: Publish package dry-run
+        if: ${{ !startsWith(github.ref, 'refs/tags/') }}
+        run: deno publish --dry-run
+
+      - name: Publish package
+        if: ${{ startsWith(github.ref, 'refs/tags/') }}
+        run: deno publish

.gitignore

@@ -1,4 +1,6 @@
 node_modules
+# dnt
+npm
 
 # Local Netlify folder
 .netlify

README.md

@@ -1,8 +1,14 @@
 # lift-html
 
-lift-html is a tiny library for building HTML Web Components, components that are meant to enhance existing HTML on the page instead of rendering it on the client or hydrating it. It utilizes SolidJS to make attributes reactive, uses signals for state management and uses hooks to better manipulate the DOM.
+lift-html is a tiny library for building HTML Web Components, components that
+are meant to enhance existing HTML on the page instead of rendering it on the
+client or hydrating it. It utilizes SolidJS to make attributes reactive, uses
+signals for state management and uses hooks to better manipulate the DOM.
 
-Code for `liftHtml` is public domain, so you are free to skip the dependency and copy the code into your project. Do that if:
-- you don't want to add another npm/jsr dependency 
+Code for `liftHtml` is public domain, so you are free to skip the dependency and
+copy the code into your project. Do that if:
+
+- you don't want to add another npm/jsr dependency
 - you want to remove the parts of the code you don't need
-- you want to quickly modify the code for your project or even a single component
+- you want to quickly modify the code for your project or even a single
+  component

demo/.gitignore

@@ -1,24 +1,23 @@
+node_modules
 
-dist
-.solid
+# Output
 .output
 .vercel
 .netlify
-netlify
+.wrangler
+/.svelte-kit
+/build
 
-# dependencies
-/node_modules
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-*.launch
-.settings/
-
-# Temp
-gitignore
-
-# System Files
+# OS
 .DS_Store
 Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

demo/package.json

@@ -1,29 +1,23 @@
 {
   "name": "demo",
+  "version": "0.0.1",
   "type": "module",
-  "description": "lift-html is a tiny library for building HTML Web Components, components that are meant to enhance existing HTML on the page instead of rendering it on the client or hydrating it. It utilizes SolidJS to make attributes reactive, uses signals for state management and uses hooks to better manipulate the DOM.",
-  "contributors": [
-    {
-      "name": "Yaroslav (JLarky) Lapin",
-      "email": "jlarky@gmail.com",
-      "url": "https://jlarky.now.sh/"
-    }
-  ],
   "scripts": {
-    "dev": "vinxi dev",
-    "build": "vinxi build",
-    "start": "vinxi start",
-    "version": "vinxi version"
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
-  "dependencies": {
-    "@lift-html/solid": "npm:@jsr/lift-html__solid",
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.0",
-    "@solidjs/start": "^1.0.10",
-    "solid-js": "^1.9.2",
-    "vinxi": "^0.4.3"
-  },
-  "engines": {
-    "node": ">=18"
+  "devDependencies": {
+    "@fontsource/fira-mono": "^5.0.0",
+    "@neoconfetti/svelte": "^2.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
   }
 }

demo/src/app.css

@@ -1,47 +1,114 @@
+@import "@fontsource/fira-mono";
+
+:root {
+  --font-body:
+    Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --font-mono: "Fira Mono", monospace;
+  --color-bg-0: rgb(202, 216, 228);
+  --color-bg-1: hsl(209, 36%, 86%);
+  --color-bg-2: hsl(224, 44%, 95%);
+  --color-theme-1: #ff3e00;
+  --color-theme-2: #4075a6;
+  --color-text: rgba(0, 0, 0, 0.7);
+  --column-width: 42rem;
+  --column-margin-top: 4rem;
+  font-family: var(--font-body);
+  color: var(--color-text);
+}
+
 body {
-  font-family:
-    Gordita,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  background-attachment: fixed;
+  background-color: var(--color-bg-1);
+  background-size: 100vw 100vh;
+  background-image:
+    radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(255, 255, 255, 0.75) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    linear-gradient(
+    180deg,
+    var(--color-bg-0) 0%,
+    var(--color-bg-1) 15%,
+    var(--color-bg-2) 50%
+  );
+}
+
+h1,
+h2,
+p {
+  font-weight: 400;
+}
+
+p {
+  line-height: 1.5;
 }
 
 a {
-  margin-right: 1rem;
+  color: var(--color-theme-1);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 
-main {
+h1 {
+  font-size: 2rem;
   text-align: center;
-  padding: 1em;
+}
+
+h2 {
+  font-size: 1rem;
+}
+
+pre {
+  font-size: 16px;
+  font-family: var(--font-mono);
+  background-color: rgba(255, 255, 255, 0.45);
+  border-radius: 3px;
+  box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+  padding: 0.5em;
+  overflow-x: auto;
+  color: var(--color-text);
+}
+
+.text-column {
+  display: flex;
+  max-width: 48rem;
+  flex: 0.6;
+  flex-direction: column;
+  justify-content: center;
   margin: 0 auto;
 }
 
-h1 {
-  color: #335d92;
-  text-transform: uppercase;
-  font-size: 4rem;
-  font-weight: 100;
-  line-height: 1.1;
-  margin: 4rem auto;
-  max-width: 14rem;
+input,
+button {
+  font-size: inherit;
+  font-family: inherit;
 }
 
-p {
-  max-width: 14rem;
-  margin: 2rem auto;
-  line-height: 1.35;
+button:focus:not(:focus-visible) {
+  outline: none;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 720px) {
   h1 {
-    max-width: none;
+    font-size: 2.4rem;
   }
+}
 
-  p {
-    max-width: none;
-  }
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }

demo/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};