sld-dom-expressions

package.json

@@ -25,27 +25,27 @@
     "jsx-sync-types": "node packages/dom-expressions/src/jsx-update.mjs"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "24.0.0",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@solidjs/signals": "^0.4.0",
-    "@types/jest": "^29.2.5",
-    "babel-jest": "^29.3.1",
+    "@solidjs/signals": "^0.4.11",
+    "@types/jest": "^29.5.14",
+    "babel-jest": "^29.7.0",
     "babel-plugin-tester": "^10.1.0",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "coveralls": "^3.1.1",
     "jest": "~29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-resolve": "^29.3.1",
-    "jest-ts-webcompat-resolver": "^1.0.0",
-    "jsdom": "^21.0.0",
-    "lerna": "^6.4.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-resolve": "^29.7.0",
+    "jest-ts-webcompat-resolver": "^1.0.1",
+    "jsdom": "^21.1.2",
+    "lerna": "^6.6.2",
     "rimraf": "^3.0.2",
-    "rollup": "^3.9.1",
+    "rollup": "^3.29.5",
     "rollup-plugin-cleanup": "^3.2.1",
     "typescript": "~5.3.3"
   }

packages/sld-dom-expressions/.npmignore

@@ -0,0 +1,7 @@
+src/
+test/
+coverage/
+types/tsconfig.tsbuildinfo
+.travis.yml
+*.config.js
+tsconfig.json

packages/sld-dom-expressions/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Ryan Carniato
+
+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.

packages/sld-dom-expressions/README.md

@@ -0,0 +1,94 @@
+# sld
+
+sld is a no-build, no-JSX tagged-template library for SolidJS and designed to work with template tooling (editor syntax highlighting, formatters, etc.) and mimic JSX as much as possible.
+
+## Quick overview
+
+- `sld` - default tagged template instance with the built-in component registry.
+  - `sld.define({CompA})` - creates a new instance from the existing instance and combines registered componenets
+  - `sld.sld` - self reference so all tags can start with `sld` for potential tooling
+- `SLD({CompA})` - factory function which includes built-in components
+- `createSLD({CompA})` - factory function which doesn't includes built-in components
+
+
+
+## Basic usage
+
+Use the default `sld` tag for templates and the `SLD` factory to create a local instance.
+
+```ts
+import { sld } from "solid-html";
+
+// default instance:
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  return sld`<button onClick=${() => setCount((v) => v + 1)}>
+    ${() => count()}
+  </button>`;
+}
+```
+
+## Reactivity and props
+
+- Props that are functions with zero arguments and not `on` events or `ref` are treated as reactive accessors and are auto-wrapped (so you can pass `() => value` and the runtime will call it for updates).
+- For properties that accept a function that are not `on` events. You may need to add ()=> to ensure the function doesn't get wrapped.
+
+```ts
+import { sld, once } from "solid-html";
+
+const [count, setCount] = createSignal(0);
+
+sld`<button count=${() => count()}  />`;
+//or just
+sld`<button count=${count} />`;
+
+//Add ()=> to avoid Counter possibly getting auto-wrapped
+sld`<Route component=${()=>Counter} />
+
+```
+
+
+## Template rules and syntax
+
+- Templates are static: tag names and attribute names must be literal (not dynamic expressions). Use spread and the Dyanmic component if necessary.
+- Tags can be self closing (like JSX)
+- Attribute binding syntax (Same as solid):
+  - `<input value="Hello World" />` - static string property
+  - `<input disabled />` - static boolean property
+  - `<input value=${val} />` - dynamic property
+  - `<input value="Hello ${val}" />` - mixed dynamic string property
+  - `onEvent=${}` or `on:event` — event listeners (Not Reactive)
+  - `ref=${}` — ref (Not Reactive)
+  - `prop:value=${}` — DOM property
+  - `attr:class=${}` — string attribute
+  - `bool:class=${}` — boolean attribute
+  - `...${}` — spread properties
+  - `${}` in content — child value
+- Components must be registered to be used as tags in templates.
+- `children` attribute is used only if the element has no child nodes (JSX-like behavior).
+- Component/attribute names are case-sensitive when registered via `sld.define` or `SLD`.
+
+## Built-In Components
+
+- For
+- Index
+- Show
+- Match
+- Switch
+- Suspense
+- ErrorBoundary
+
+
+## Advanced: Creating custom SLD instances
+
+`SLD(components)` returns a tagged template bound to the provided component registry. This is useful for scoping or providing non-global components to templates. `SLD` includes the built-in components. use `createSLD` if you do not want to include the built-in components.
+
+```ts
+const My = SLD({ Counter, Router: HashRouter });
+My`<Counter />`;
+
+//This can also be inline with self refercing sld property
+SLD({ Counter, Router: HashRouter }).sld`<Counter />
+
+
+```

packages/sld-dom-expressions/babel.config.js

@@ -0,0 +1,13 @@
+// babel.config.js
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: [
+    [
+      "babel-plugin-transform-rename-import",
+      {
+        original: "rxcore",
+        replacement: "../test/core"
+      }
+    ]
+  ]
+};

packages/sld-dom-expressions/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  collectCoverageFrom: [
+    'dist/sld-dom-expressions.js'
+  ],
+  transform: {
+    "^.+\\.[t|j]sx?$": require.resolve("../dom-expressions/test/transform-dom")
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(dom-expressions)/)"
+  ]
+}

packages/sld-dom-expressions/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "sld-dom-expressions",
+  "description": "A Fine-Grained Rendering Runtime API using Tagged Template Literals",
+  "version": "0.41.0-next.0",
+  "author": "Daniel Kling",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ryansolid/dom-expressions/blob/main/packages/sld-dom-expressions"
+  },
+  "main": "lib/sld-dom-expressions.js",
+  "module": "dist/sld-dom-expressions.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs && tsc",
+    "test": "pnpm run build && jest",
+    "test:coverage": "pnpm run build && jest --coverage",
+    "prepare": "pnpm run build"
+  },
+  "devDependencies": {
+    "dom-expressions": "^0.41.0-next.0",
+    "html5parser": "^2.0.2"
+  }
+}

packages/sld-dom-expressions/rollup.config.js

@@ -0,0 +1,29 @@
+import babel from '@rollup/plugin-babel';
+import nodeResolve from '@rollup/plugin-node-resolve';
+
+const plugins = [
+  nodeResolve({
+    extensions: [".js", ".ts"]
+  }),
+  babel({
+    extensions: ['.js', '.ts'],
+    babelHelpers: "bundled",
+    presets: ["@babel/preset-typescript"],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    configFile: false,
+    retainLines: true
+  })
+];
+
+export default {
+  input: 'src/index.ts',
+  output: [{
+    file: 'lib/sld-dom-expressions.js',
+    format: 'cjs'
+  }, {
+    file: 'dist/sld-dom-expressions.js',
+    format: 'es'
+  }],
+  plugins
+};

packages/sld-dom-expressions/src/index.ts

@@ -0,0 +1,3 @@
+import { createSLDRuntime } from "./sld";
+
+export {createSLDRuntime}