Merge pull request #21 from ConnorJamesLow/release/v0.6.1

v0.6.1
ConnorJamesLow · Jun 30, 2022 · f2d10ff · f2d10ff
2 parents 999101c + d86ede0
commit f2d10ff
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 15 deletions.
diff --git a/examples/vite-ts-project/src/counter.tsx b/examples/vite-ts-project/src/counter.tsx
@@ -0,0 +1,15 @@
+import jsx from 'texsaur';
+
+export const Counter: JSX.Component = () => {
+    let clicks = 0;
+    const getMessage = () => `I have been clicked ${clicks} time${clicks++ === 1 ? '' : 's'}.`;
+
+    let display = <span>{getMessage()}</span>;
+    return (
+        <div class="counter">
+            <button onclick={() => display.innerHTML = getMessage()}>
+                {display}
+            </button>
+        </div>
+    );
+}
diff --git a/examples/vite-ts-project/src/example.tsx b/examples/vite-ts-project/src/example.tsx
@@ -1,19 +1,28 @@
 import jsx from 'texsaur';
+import { Counter } from './counter';
+import svgTest from './svg-test';
 
 interface ExampleProps {
     onClick(ev: MouseEvent): any
 }
 
 const Example: JSX.Component<ExampleProps> = ({ onClick }, children) => (
-    <div class="example" onclick={onClick}>{children}</div>
+    <div class="example" onclick={onClick} aria-label="Example">{children}</div>
 );
 
+
 const div = <div>Hello there.</div> as HTMLElement;
+const span = <span>Hello from inside the Example component!</span>;
 const content = <>
     {div}
     <Example onClick={() => alert('clicked!')}>
-        Hello from inside the Example component!
+        {span}
+    </Example>
+    <Example onClick={() => console.log(svgTest)}>
+        {svgTest}
     </Example>
+    <Counter />
 </> as any as HTMLElement[];
 
+
 export default <main>{content}</main>;
diff --git a/examples/vite-ts-project/src/svg-test.tsx b/examples/vite-ts-project/src/svg-test.tsx
@@ -0,0 +1,28 @@
+import jsx from 'texsaur';
+
+export default <>
+    <svg viewBox="0 -20 100 50">
+        <switch>
+            <text systemLanguage="ar">مرحبا</text>
+            <text systemLanguage="de,nl">Hallo!</text>
+            <text systemLanguage="en-us">Howdy!</text>
+            <text systemLanguage="en-gb">Wotcha!</text>
+            <text systemLanguage="en-au">G'day!</text>
+            <text systemLanguage="en">Hello!</text>
+            <text systemLanguage="es">Hola!</text>
+            <text systemLanguage="fr">Bonjour!</text>
+            <text systemLanguage="ja">こんにちは</text>
+            <text systemLanguage="ru">Привет!</text>
+            <text>☺</text>
+        </switch>
+    </svg>
+
+    <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+        <circle cx="50" cy="50" r="40" />
+        <circle cx="150" cy="50" r="4" />
+
+        <svg viewBox="0 0 10 10" x="200" width="100">
+            <circle cx="5" cy="5" r="4" />
+        </svg>
+    </svg>
+</>;
diff --git a/package/package-lock.json b/package/package-lock.json
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "texsaur",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "",
   "types": "./dist/index.d.ts",
   "main": "dist/index.js",

diff --git a/package/src/index.ts b/package/src/index.ts
@@ -16,7 +16,6 @@ function __jsx(tag: JSX.Tag | JSX.Component, properties: { [key: string]: any }
         return svg.parseSvgElement(tag, properties ?? {}, ...children);
     }
 
-    type Tag = typeof tag;
     const element = document.createElement(tag);
 
     let map = (properties ?? {}) as RecursivePartial<JSX.IntrinsicElements[typeof tag]>;
@@ -65,7 +64,7 @@ function __jsx(tag: JSX.Tag | JSX.Component, properties: { [key: string]: any }
         // Event callbacks:
         if (/^on/.test(prop)) {
             if (typeof value === 'function') {
-                element.addEventListener(prop.substr(2), map[prop] as any);
+                element.addEventListener(prop.substring(2), map[prop] as any);
             } else {
                 warn('function', typeof value);
             }
@@ -88,7 +87,7 @@ function __jsx(tag: JSX.Tag | JSX.Component, properties: { [key: string]: any }
     }
 
     // append children
-    for (let child of children) {
+    for (let child of children.flat()) {
         if (child instanceof Node) {
             element.appendChild(child);
             continue;

diff --git a/package/src/svg.ts b/package/src/svg.ts
@@ -33,7 +33,7 @@ const SVG_TAGS = [
     "filter",
     "foreignObject",
     "g",
-    "image",
+    // "image",
     "line",
     "linearGradient",
     "marker",
@@ -53,11 +53,11 @@ const SVG_TAGS = [
     "symbol",
     "text",
     "textPath",
-    "title",
+    // "title",
     "tspan",
     "use",
     "view",
-]
+];
 
 const SVG_XMLNS = 'http://www.w3.org/2000/svg';
 let __experimental_warning_shown = false;
@@ -67,7 +67,7 @@ export function isSvgTag(tag: string) {
 }
 
 export function parseSvgElement(tag: string, attributes: { [key: string]: any }, ...children: Node[]) {
-    const { document } = JsxDom;
+    const { document, Node } = JsxDom;
     if (!__experimental_warning_shown) {
         __experimental_warning_shown = true;
         console.warn('texsaur SVG support is experimental!');
@@ -80,7 +80,7 @@ export function parseSvgElement(tag: string, attributes: { [key: string]: any },
         const value = attributes[prop] as any;
 
         // Add attributes:
-        element.setAttributeNS(null, prop, value);
+        element.setAttribute(prop, value);
     }
 
     // append children
@@ -89,7 +89,11 @@ export function parseSvgElement(tag: string, attributes: { [key: string]: any },
             element.append(...child);
             continue;
         }
-        element.appendChild(child);
+        if (child instanceof Node) {
+            element.appendChild(child);
+        } else {
+            element.append(child);
+        }
     }
     return element;
-}
+}