@thyn/core 0.0.344 → 0.0.347

package/docs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "thyn-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@thyn/core": "^0.0.345",
+    "vite": "^6.3.5"
+  }
+}

package/docs/public/thyn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1024px" viewBox="120 -840 720 720" width="1024px" fill="#58c4dc"><path d="m338.77-480 65.92-65.92q8.92-8.93 9.12-20.89.19-11.96-9.12-21.27-9.31-9.3-21.38-9.3-12.08 0-21.39 9.3l-82.77 82.77q-5.61 5.62-7.92 11.85-2.31 6.23-2.31 13.46t2.31 13.46q2.31 6.23 7.92 11.85l83.16 83.15q8.92 8.92 21.19 9.12 12.27.19 21.58-9.12 9.3-9.31 9.3-21.08 0-11.76-9.3-21.07L338.77-480Zm282.46 0-66.31 66.31q-8.92 8.92-9.11 20.88-.19 11.96 9.11 21.27 9.31 9.31 21.39 9.31 12.07 0 21.38-9.31l83.16-83.15q5.61-5.62 7.92-11.85 2.31-6.23 2.31-13.46t-2.31-13.46q-2.31-6.23-7.92-11.85l-83.16-83.15q-4.46-4.46-10.04-6.69-5.57-2.23-11.15-2.23t-11.35 2.23q-5.76 2.23-10.23 6.69-9.3 9.31-9.3 21.08 0 11.76 9.3 21.07L621.23-480ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h535.38Q778-820 799-799q21 21 21 51.31v535.38Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-535.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H212.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85ZM200-760v560-560Z"/></svg>

package/docs/src/App.thyn

@@ -0,0 +1,10 @@
+<script>
+  import { Router } from "@thyn/core/router";
+  import Home from "./pages/Home.thyn";
+  import GettingStarted from "./docs/GettingStarted.thyn";
+</script>
+
+<Router routes={[
+  { path: "/", component: Home },
+  { path: "/docs/getting-started", component: GettingStarted },
+]} />

package/docs/src/components/Button.thyn

@@ -0,0 +1,3 @@
+<button onclick={$props.onclick}>
+  <slot />
+</button>

package/docs/src/docs/GettingStarted.thyn

@@ -0,0 +1,8 @@
+<script>
+  import { Link } from "@thyn/core/router";
+</script>
+
+<main>
+  Getting Started
+  <Link to="/">Home</Link>
+</main>

package/docs/src/main.css

@@ -0,0 +1,17 @@
+html,
+body {
+	height: 100%;
+	text-align: center;
+	position: relative;
+	margin: 0;
+	background: #24272f;
+	color: #fff;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+	font-weight: 200;
+}

package/docs/src/main.js

@@ -0,0 +1,5 @@
+import { mount } from "@thyn/core";
+import "./main.css";
+import App from "./App.thyn";
+
+mount(App, document.body);

package/docs/src/pages/Home.thyn

@@ -0,0 +1,147 @@
+<script>
+  import Button from "../components/Button.thyn";
+  const count = $signal(0);
+
+  const taglines = [
+    "The healthy choice for your codebase.",
+    "Thyn is in. Bloat is out.",
+    "So thyn, it barely exists.",
+  ];
+
+  const tagline = $signal(0);
+  $effect(() => {
+    const interval = setInterval(() => tagline(t => t + 1), 5000);
+    return () => clearInterval(interval);
+  });
+
+  setTimeout(() => {
+    Prism.highlightAll();
+  });
+</script>
+
+<div class="main">
+  <h1>
+    <img src="/thyn.svg" />
+    thyn
+  </h1>
+  <p class="tagline">{{ taglines[tagline() % taglines.length] }}</p>
+  <div class="compiled-wrapper">
+    <div>
+      <h4>source</h4>
+      <pre>
+        <code class="code language-javascript">
+// App.thyn
+&lt;script&gt;
+  const count = $signal(0);
+&lt;/script&gt;
+
+&lt;button onclick={() =&gt; count(c =&gt; c + 1)}&gt;
+  Count: \{{ count() \}}
+&lt;/button&gt;
+
+&lt;style&gt;
+  button {
+    background: #333;
+  }
+&lt;/style&gt;
+
+// main.js
+import { mount } from '@thyn/core';
+import App from './App.thyn';
+
+mount(App, document.body);          
+       </code>
+      </pre>
+    </div>
+    <div>
+      <h4>compiled</h4>
+      <pre>
+        <code class="compiled language-javascript">
+let u,s;const r=[];function l(t){r.push(t),s||(s=!0,queueMicrotask(()=&gt;{for(const n of r)f(n);r.length=0,s=!1}))}function p(t){const n=new Set;return(...e)=&gt;{if(!e.length)return u&amp;&amp;(n.add(u),u.deps.add(n)),t;const o=e[0],i=typeof o==&quot;function&quot;?o(t):o;if(i!==t){t=i;for(const d of n)l(d)}}}function f(t,n){n||a(t);const e=u;u=t;const o=t.run();o&amp;&amp;(t.td?t.td.push(o):t.td=[o]),u=e}function _(t,n){const e={run:t,deps:new Set,show:n};return f(e,!0),e}function a(t){const{deps:n,td:e}=t;if(n.size){for(const o of n)o.delete(t);n.clear()}if(e){for(const o of e)o();t.td=null}}function h(t,n){n.appendChild(t())}let c;function m(){if(!c){c=document.createElement(&quot;button&quot;),c.className=&quot;thyn-0&quot;;const t=document.createTextNode(&quot;&quot;);return c.appendChild(t),c}return c.cloneNode(!0)}function N(t){const n=p(0),e=m();return e.onclick=()=&gt;n(o=&gt;o+1),_(()=&gt;{e.firstChild.nodeValue=`Count: ${n()}`}),e}h(N,document.body);
+        </code>
+      </pre>
+    </div>
+  </div>
+  <a href="https://github.com/thynjs/thyn">GitHub</a>
+</div>
+
+<style>
+  .main {
+  	width: 100%;
+  	margin: auto;
+  	max-width: 1200px;
+  	padding-top: 5%;
+  }
+
+  h1 {
+  	font-size: 48px;
+  	letter-spacing: 2px;
+  	display: flex;
+  	align-items: center;
+  	justify-content: center;
+  	gap: 12px;
+  }
+
+  h1 img {
+  	width: 50px;
+  	position: relative;
+  	top: 2px;
+  }
+
+  h4 {
+  	margin: 0;
+  }
+
+  .compiled-wrapper {
+  	display: flex;
+  	gap: 20px;
+  	flex-direction: column;
+  }
+
+  @media (min-width:800px) {
+  	.compiled-wrapper {
+  		flex-direction: row;
+  	}
+  }
+
+  .compiled-wrapper>* {
+  	flex-grow: 1;
+  	flex-basis: 1px;
+  	display: flex;
+  	gap: 10px;
+  	flex-direction: column;
+  }
+
+  pre {
+  	flex-grow: 1;
+  	width: 100%;
+  	max-width: calc(100vw - 40px);
+  	font-size: 14px !important;
+  	margin: auto !important;
+    text-align: left;
+  	padding: 10px 20px !important;
+  	border-radius: 10px;
+  	margin-bottom: 20px !important;
+  	background: rgba(0, 0, 0, 0.25) !important;
+  }
+
+  code {
+  	word-break: break-all !important;
+  	white-space: pre-wrap !important;
+  	line-height: 1.25 !important;
+  }
+
+  .code {
+  	font-size: 12px !important;
+  }
+
+  .compiled {
+  	font-size: 12px !important;
+  }
+
+  a {
+  	color: #fff;
+  	margin: 20px 0;
+  	display: inline-block;
+  }
+</style>

package/docs/vite.config.js

@@ -0,0 +1,7 @@
+import thyn from "@thyn/core";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [thyn()],
+  build: { modulePreload: false },
+});

package/package.json

@@ -1,28 +1,36 @@
 {
   "name": "@thyn/core",
-  "version": "0.0.344",
+  "version": "0.0.347",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./router": "./dist/router.js"
+  },
+  "sideEffects": false,
   "scripts": {
     "build": "tsc",
     "pub": "tsc && npm version patch -f && npm -f publish --access=public",
     "test": "vitest"
   },
-  "type": "module",
-  "main": "dist/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thynjs/thyn.git"
   },
-  "exports": {
-    ".": "./dist/index.js",
-    "./router": "./dist/router.js"
-  },
-  "sideEffects": false,
   "author": "harmtrav@gmail.com",
   "license": "MIT",
+  "dependencies": {
+    "acorn": "^8.15.0",
+    "acorn-walk": "^8.3.4",
+    "esbuild": "^0.27.2",
+    "magic-string": "^0.30.21",
+    "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.1"
+  },
   "devDependencies": {
-    "jsdom": "^27.4.0",
+    "happy-dom": "^20.6.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.18"
   }
 }

package/src/{element.ts → core/element.ts}

@@ -320,8 +320,8 @@ export function list(props, terminal = false) {
     }
 
     if (start < 0) {
-      for (let i = nextItems.length; i < oldLength; i++) {
-        const e = childNodes[offset + --oldLength];
+      for (let i = oldLength - 1; i >= nextItems.length; i--) {
+        const e = childNodes[offset + i];
         teardownNode(e);
         remove(e);
       }
@@ -352,7 +352,7 @@ export function list(props, terminal = false) {
     for (const e of removalQueue) {
       remove(e);
     }
-    if (oldLength - start === removalQueue.length) {
+    if (oldLength - start === removalQueue.length && newLength === oldLength) {
       prevItems = nextItems;
       nextItems = null;
       return;
@@ -364,10 +364,7 @@ export function list(props, terminal = false) {
         (!nextItems[i] ||
           prevItems[i] !== nextItems[i])
       ) {
-        keyMap.set(prevItems[i], {
-          el: childNodes[i + offset],
-          item: prevItems[i],
-        });
+        keyMap.set(prevItems[i], childNodes[i + offset]);
       }
     }
     while (start <= newLength) {
@@ -378,20 +375,17 @@ export function list(props, terminal = false) {
         continue;
       }
       if (oldChd === undefined) {
-        parent.insertBefore(render(newChd), endBookend);
+        parent.insertBefore(render(newChd), childNodeList[start + offset] ?? endBookend);
         start++;
         continue;
       }
       const mappedOld = keyMap.get(newChd);
       if (mappedOld) {
         const oldDom = childNodeList[start + offset];
-        const { el, item } = mappedOld;
-        if (oldDom !== el) {
-          const tmp = el.nextSibling;
-          parent.insertBefore(el, oldDom);
+        if (oldDom !== mappedOld) {
+          const tmp = mappedOld.nextSibling;
+          parent.insertBefore(mappedOld, oldDom);
           parent.insertBefore(oldDom, tmp);
-        } else if (item !== newChd) {
-          replaceWith(newChd, el, render);
         }
         keyMap.delete(newChd);
       } else if (oldChd !== newChd) {
@@ -399,10 +393,6 @@ export function list(props, terminal = false) {
       }
       start++;
     }
-    for (const { el } of keyMap.values()) {
-      teardownNode(el);
-      remove(el);
-    }
     keyMap = null;
     prevItems = nextItems;
     nextItems = null;
@@ -537,7 +527,7 @@ export function isolatedTerminalList(props) {
       ch.remove();
       childNodes[i] = null;
     }
-    if (oldLength - start === removalQueueIndices.length) {
+    if (oldLength - start === removalQueueIndices.length && newLength === oldLength) {
       prevItems = nextItems;
       nextItems = null;
       childNodes = null;
@@ -550,10 +540,7 @@ export function isolatedTerminalList(props) {
         (!nextItems[i] ||
           prevItems[i] !== nextItems[i])
       ) {
-        keyMap.set(prevItems[i], {
-          el: childNodes[i + 1],
-          item: prevItems[i],
-        });
+        keyMap.set(prevItems[i], childNodes[i + 1]);
       }
     }
     while (start <= newLength) {
@@ -564,22 +551,19 @@ export function isolatedTerminalList(props) {
         continue;
       }
       if (oldChd === undefined) {
-        parent.insertBefore(render(newChd), endBookend);
+        parent.insertBefore(render(newChd), childNodeList[start + 1]);
         start++;
         continue;
       }
       const mappedOld = keyMap.get(newChd);
       if (mappedOld) {
         const oldDom = childNodeList[start + 1];
-        const { el, item } = mappedOld;
-        if (oldDom !== el) {
-          const tmp = el.nextSibling;
-          parent.insertBefore(el, oldDom);
+        if (oldDom !== mappedOld) {
+          const tmp = mappedOld.nextSibling;
+          parent.insertBefore(mappedOld, oldDom);
           if (oldDom !== tmp) {
             parent.insertBefore(oldDom, tmp);
           }
-        } else if (item !== newChd) {
-          replaceWith(newChd, el, render);
         }
         keyMap.delete(newChd);
       } else if (oldChd !== newChd) {
@@ -587,10 +571,6 @@ export function isolatedTerminalList(props) {
       }
       start++;
     }
-    for (const { el } of keyMap.values()) {
-      shallowTeardown(el);
-      el.remove();
-    }
     keyMap = null;
     prevItems = nextItems;
     nextItems = null;

package/src/core/index.ts

@@ -0,0 +1 @@
+export * from "./router.js";

package/src/{router.ts → core/router.ts}

@@ -1,20 +1,35 @@
 import { component, show } from "./element.js";
 import { $signal, staticEffect } from "./signals.js";
 
-const params = $signal({} as any);
+let params = null;
+let routerPath = null;
+let initialized = false;
+
+function initRouter() {
+  if (initialized) return;
+  params = $signal({} as any);
+  routerPath = $signal(location.pathname);
+  initialized = true;
+}
 
 export const router = {
-  path: $signal(location.pathname),
-  param: (name: string): string | undefined => params()[name],
+  get path() {
+    initRouter();
+    return routerPath;
+  },
+  param: (name: string): string | undefined => {
+    initRouter();
+    return params()[name];
+  },
 };
 
-
 interface Route {
   path: string;
   component: () => Node;
 }
 
 export function Router({ routes }: { routes: Route[] }) {
+  initRouter();
   const current = $signal(null);
   const compiledRoutes = routes.map(route => {
     const compiledRoute = {
@@ -31,7 +46,7 @@ export function Router({ routes }: { routes: Route[] }) {
   });
 
   staticEffect(() => {
-    const pn = router.path();
+    const pn = routerPath();
     if (pn !== location.pathname) {
       history.pushState({}, "", pn);
     }
@@ -61,6 +76,7 @@ export function Router({ routes }: { routes: Route[] }) {
 }
 
 export function Link({ slot, to }) {
+  initRouter();
   const a = document.createElement("a");
   a.href = to;
   for (const ch of slot) {
@@ -74,7 +90,7 @@ export function Link({ slot, to }) {
     ) {
       e.preventDefault();
       history.pushState({}, "", to);
-      router.path(to);
+      routerPath(to);
     }
   };
   return a;

package/src/{signals.ts → core/signals.ts}

@@ -120,4 +120,4 @@ export function cleanup(ef) {
   } else {
     for (const f of td) typeof f === "function" ? f() : f.delete(ef);
   }
-}
+}

package/src/index.ts

@@ -1,15 +1,5 @@
-export {
-  addChildren,
-  addEffect,
-  component, createReactiveTextNode, fixedComponent, isolatedTerminalList, list,
-  markAsReactive,
-  mount,
-  setAttribute,
-  setProperty,
-  setReactiveAttribute,
-  setReactiveProperty,
-  show,
-  terminalList
-} from "./element.js";
-export { $effect, $signal, staticEffect } from "./signals.js";
-
+export * from "./core/signals.js";
+export * from "./core/element.js";
+export * from "./core/router.js";
+export { default } from "./plugin/index.js";
+export { transformSFC, compileSFC } from "./plugin/index.js";