solidjs-community · thetarnav · Jan 27, 2023 · Dec 31, 2022 · Jan 2, 2023 · Jan 3, 2023
diff --git a/packages/jsx-parser/LICENSE b/packages/jsx-parser/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+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.
diff --git a/packages/jsx-parser/README.md b/packages/jsx-parser/README.md
@@ -0,0 +1,27 @@
+<p>
+  <img width="100%" src="" alt="Solid Primitives parser">
+</p>
+
+# @solid-primitives/parser
+
+## Installation
+
+```bash
+npm install @solid-primitives/parser
+# or
+yarn add @solid-primitives/parser
+# or
+pnpm add @solid-primitives/parser
+```
+
+## How to use it
+
+## TODO
+
+## Demo
+
+TODO
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/jsx-parser/dev/index.html b/packages/jsx-parser/dev/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Solid App</title>
+    <style>
+      html {
+        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+      }
+
+      body {
+        padding: 0;
+        margin: 0;
+      }
+
+      a,
+      button {
+        cursor: pointer;
+      }
+      button[disabled] {
+        cursor: not-allowed;
+      }
+      button[aria-current] {
+        font-weight: bold;
+        background: #222;
+        color: #fff;
+      }
+      * {
+        margin: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/packages/jsx-parser/dev/index.tsx b/packages/jsx-parser/dev/index.tsx
@@ -0,0 +1,93 @@
+import { Component, createMemo, For, JSXElement } from "solid-js";
+import { render } from "solid-js/web";
+import "uno.css";
+import { createJSXParser } from "../src";
+
+const { createToken, childrenTokens } = createJSXParser("calculator");
+
+type Meta = { callback: (props: Props) => JSXElement };
+type Props = {
+  value: number;
+  children?: JSXElement | JSXElement[];
+};
+
+type CustomToken = TokenValue | TokenAdd | TokenSubtract;
+
+const Calculator = (props: {
+  children: JSXElement | JSXElement[] | CustomToken | CustomToken[];
+}) => {
+  const tokens = childrenTokens(() => props.children);
+
+  const calculation = () => {
+    let result = 0;
+    tokens().forEach(token => {
+      console.info("token is ", token);
+      if (token.id === "Value") {
+        result = token.props.value;
+      } else if (token.id === "Add") {
+        result += token.props.value;
+      } else if (token.id === "Subtract") {
+        result -= token.props.value;
+      }
+      console.info("result is", result);
+    });
+    return result;
+  };
+
+  return (
+    <div>
+      <For each={tokens()}>{token => token.callback(token.props)}</For> = {calculation()}
+    </div>
+  );
+};
+
+type MetaValue = {
+  id: "Value";
+} & Meta;
+type TokenValue = MetaValue & { props: Props };
+
+const Value = createToken<Props, TokenValue>(
+  props => ({
+    props,
+    id: "Value",
+    callback: props => <>{props.value}</>
+  }),
+  props => <>value outside of a calculator: {props.value}</>
+);
+
+type MetaAdd = {
+  id: "Add";
+} & Meta;
+type TokenAdd = MetaAdd & { props: Props };
+
+const Add = createToken<Props, TokenAdd>(props => ({
+  props,
+  id: "Add",
+  callback: (props: Props) => <> + {props.value}</>
+}));
+
+type MetaSubtract = {
+  id: "Subtract";
+} & Meta;
+type TokenSubtract = MetaSubtract & { props: Props };
+
+const Subtract = createToken<Props, TokenSubtract>(props => ({
+  props,
+  id: "Subtract",
+  callback: (props: Props) => <> - {props.value}</>
+}));
+
+const App: Component = () => {
+  return (
+    <>
+      <Value value={2} />
+      <Calculator>
+        <Value value={1} />
+        <Add value={4} />
+        <Subtract value={2} />
+      </Calculator>
+    </>
+  );
+};
+
+render(() => <App />, document.getElementById("root")!);
diff --git a/packages/jsx-parser/dev/vite.config.ts b/packages/jsx-parser/dev/vite.config.ts
@@ -0,0 +1,2 @@
+import { viteConfig } from "../../../configs/vite.config";
+export default viteConfig;
diff --git a/packages/jsx-parser/package.json b/packages/jsx-parser/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "@solid-primitives/jsx-parser",
+  "version": "0.0.101",
+  "description": "A primitive to tokenize your solid-components to enable custom parsing.",
+  "author": "Vincent Van Dijck <vandijckv@gmail.com>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "/~https://github.com/solidjs-community/solid-primitives/tree/main/packages/parser#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+/~https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "/~https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "jsx-parser",
+    "stage": 0,
+    "list": [
+      "createJSXParser"
+    ],
+    "category": "Utilities"
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "jsx-parser"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/server.cjs",
+  "module": "./dist/server.js",
+  "browser": {
+    "./dist/server.cjs": "./dist/index.cjs",
+    "./dist/server.js": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "worker": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "browser": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "deno": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "node": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build": "jiti ../../scripts/build.ts --ssr --dev",
+    "test": "vitest -c ../../configs/vitest.config.ts",
+    "test:ssr": "pnpm run test --mode ssr"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.6.0"
+  }
+}
diff --git a/packages/jsx-parser/src/index.ts b/packages/jsx-parser/src/index.ts
@@ -0,0 +1,39 @@
+import { JSXElement, createMemo } from "solid-js";
+
+export function createJSXParser(id: string = "solid-parser") {
+  const $TOKEN = Symbol(id);
+
+  function createToken<
+    TProps extends { [key: string]: any },
+    TToken extends { [key: string]: any } & { id: string }
+  >(
+    tokenProperties: (props: TProps) => TToken,
+    component?: (props: TProps) => JSXElement
+  ): (props: TToken["props"]) => JSXElement {
+    return (props: TProps) => {
+      return Object.assign(
+        component
+          ? () => component(props)
+          : () => {
+              process.env.DEV &&
+                console.info(`tokens can only be rendered inside a Parser with id '${id}'`);
+              return "";
+            },
+        {
+          [$TOKEN]: true,
+          ...tokenProperties(props)
+        }
+      );
+    };
+  }
+
+  function childrenTokens<T>(children: () => JSXElement | JSXElement[] | T | T[]) {
+    return createMemo(() =>
+      children
+        ? (([] as any[]).concat(children()).filter(child => child && $TOKEN in child) as T[])
+        : []
+    );
+  }
+
+  return { createToken, childrenTokens, $TOKEN };
+}
diff --git a/packages/jsx-parser/test/index.test.ts b/packages/jsx-parser/test/index.test.ts
diff --git a/packages/jsx-parser/test/server.test.ts b/packages/jsx-parser/test/server.test.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { viteConfig } from "../../../configs/vite.config";
		export default viteConfig;