create-atom.io 0.0.1 → 0.0.2

package/templates/{base → preact-svg-editor}/src/BezierPlayground.tsx

@@ -1,38 +1,40 @@
+import type { Loadable, RegularAtomToken } from "atom.io"
 import {
 	atom,
 	atomFamily,
 	getState,
-	Loadable,
 	resetState,
+	runTransaction,
 	selectorFamily,
 	setState,
+	transaction,
 } from "atom.io"
-import { type RegularAtomToken } from "atom.io"
 import { useO } from "atom.io/react"
-import { PointerEventHandler, TargetedPointerEvent } from "preact"
-import { useRef, useCallback, useEffect, MutableRef } from "preact/hooks"
+import type { PointerEventHandler, TargetedPointerEvent, VNode } from "preact"
+import type { MutableRef } from "preact/hooks"
+import { useCallback, useEffect, useRef } from "preact/hooks"
 
 type PointXY = { x: number; y: number }
 type EdgeXY = { c?: PointXY; s: PointXY }
 
 const pathKeysAtom = atom<string[]>({
-	key: "pathKeys",
+	key: `pathKeys`,
 	default: [],
 })
 const subpathKeysAtoms = atomFamily<string[], string>({
-	key: "subpathKeys",
+	key: `subpathKeys`,
 	default: [],
 })
 const nodeAtoms = atomFamily<PointXY | null, string>({
-	key: "nodeAtoms",
+	key: `nodeAtoms`,
 	default: null,
 })
-const edgeAtoms = atomFamily<boolean | EdgeXY, string>({
-	key: "edgeAtoms",
+const edgeAtoms = atomFamily<EdgeXY | boolean, string>({
+	key: `edgeAtoms`,
 	default: true,
 })
 const pathDrawSelectors = selectorFamily<string, string>({
-	key: "pathDrawSelectors",
+	key: `pathDrawSelectors`,
 	get:
 		(pathKey) =>
 		({ get }) => {
@@ -43,7 +45,7 @@ const pathDrawSelectors = selectorFamily<string, string>({
 					const edge = get(edgeAtoms, subpathKey)
 
 					if (node === null) {
-						return "Z"
+						return `Z`
 					}
 					if (idx === 0) {
 						return `M ${node.x} ${node.y}`
@@ -59,7 +61,7 @@ const pathDrawSelectors = selectorFamily<string, string>({
 					}
 					return `S ${edge.s.x} ${edge.s.y} ${node.x} ${node.y}`
 				})
-				.join(" ")
+				.join(` `)
 		},
 })
 
@@ -89,8 +91,10 @@ function Bezier({
 	node?: PointXY
 }) {
 	let node: PointXY | null
+	// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
 	switch (typeof maybeNode) {
-		case "undefined":
+		case `undefined`:
+			// eslint-disable-next-line react-hooks/rules-of-hooks
 			node = useO(nodeAtoms, prevSubpathKey)
 			break
 		default:
@@ -145,7 +149,7 @@ function Node({
 	const edge = useO(edgeAtoms, subpathKey)
 	return node === null ? null : (
 		<>
-			{typeof edge === "boolean" ? (
+			{typeof edge === `boolean` ? (
 				<rect class="node" x={node.x - 3} y={node.y - 3} width={6} height={6} />
 			) : (
 				<>
@@ -182,17 +186,20 @@ function Node({
 
 function RenderedPath({ pathKey }: { pathKey: string }) {
 	const draw = useO(pathDrawSelectors, pathKey)
-	return <path d={`${draw} Z`} class="path" style={{ pointerEvents: "none" }} />
+	return <path d={`${draw} Z`} class="path" style={{ pointerEvents: `none` }} />
 }
 
 function Path({ pathKey }: { pathKey: string }) {
 	const subpathKeys = useO(subpathKeysAtoms, pathKey)
-	console.log(console.log(`render path`, subpathKeys))
 	return (
 		<>
 			<RenderedPath pathKey={pathKey} />
 			{subpathKeys.toReversed().map((spk, idx, arr) => (
-				<Node subpathKey={spk} nextSubpathKey={arr[idx + 1] ?? arr[0]} />
+				<Node
+					subpathKey={spk}
+					nextSubpathKey={arr[idx + 1] ?? arr[0]}
+					key={spk}
+				/>
 			))}
 		</>
 	)
@@ -203,18 +210,18 @@ function PathsDemo() {
 	return (
 		<>
 			{pathKeys.map((pathKey) => {
-				return <Path pathKey={pathKey} />
+				return <Path pathKey={pathKey} key={pathKey} />
 			})}
 		</>
 	)
 }
 
 const svgRefAtom = atom<SVGSVGElement | null>({
-	key: "svgRef",
+	key: `svgRef`,
 	default: null,
 })
-const currentlyDraggingAtom = atom<null | { key: string; by?: `c` | `s` }>({
-	key: "currentlyDragging",
+const currentlyDraggingAtom = atom<{ key: string; by?: `c` | `s` } | null>({
+	key: `currentlyDragging`,
 	default: null,
 })
 
@@ -257,144 +264,147 @@ function onPointerMove(evt: TargetedPointerEvent<SVGSVGElement>): void {
 const CODES = [`m`, `M`, `l`, `L`, `c`, `C`, `v`, `V`, `z`, `Z`] as const
 
 const preactLogoAtom = atom<Loadable<string>>({
-	key: "preactLogo",
-	default: () => fetch("preact.svg").then((res) => res.text()),
+	key: `preactLogo`,
+	default: () => fetch(`preact.svg`).then((res) => res.text()),
 })
 
-async function reset() {
-	const logo = await getState(preactLogoAtom)
-	for (const pathKey of getState(pathKeysAtom)) {
-		resetState(subpathKeysAtoms, pathKey)
-	}
-	resetState(pathKeysAtom)
+const resetTX = transaction<() => Promise<void>>({
+	key: `reset`,
+	do: async () => {
+		const logo = await getState(preactLogoAtom)
+		for (const pathKey of getState(pathKeysAtom)) {
+			resetState(subpathKeysAtoms, pathKey)
+		}
+		resetState(pathKeysAtom)
 
-	const shapes = logo
-		.split("\n")
-		.filter((l) => l.startsWith("\t<path"))
-		.map((logo) => {
-			const raw = logo.split(`d="`)[1].slice(0, -9)
+		const shapes = logo
+			.split(`\n`)
+			.filter((line) => line.startsWith(`\t<path`))
+			.map((line) => {
+				const raw = line.split(`d="`)[1].slice(0, -9)
 
-			type Letter = (typeof CODES)[number]
-			let letter: Letter | undefined
-			let number = ``
-			let numbers: number[] = []
+				type Letter = (typeof CODES)[number]
+				let letter: Letter | undefined
+				let number = ``
+				let numbers: number[] = []
 
-			const instructions: { letter: Letter; numbers: number[] }[] = []
-			for (let i = 0; i < raw.length; i++) {
-				const c = raw[i]
-				if (CODES.includes(c as Letter)) {
-					if (number) {
+				const instructions: { letter: Letter; numbers: number[] }[] = []
+				for (const c of raw) {
+					if (CODES.includes(c as Letter)) {
+						if (number) {
+							numbers.push(Number.parseFloat(number))
+							number = ``
+						}
+						if (letter) {
+							instructions.push({ letter, numbers })
+						}
+						letter = c as Letter
+						numbers = []
+						continue
+					}
+					if (c === ` `) {
 						numbers.push(Number.parseFloat(number))
 						number = ``
+						continue
 					}
-					if (letter) {
-						instructions.push({ letter, numbers })
+					if (c === `-` && number) {
+						numbers.push(Number.parseFloat(number))
+						number = `-`
+						continue
 					}
-					letter = c as Letter
-					numbers = []
-					continue
-				}
-				if (c === ` `) {
-					numbers.push(Number.parseFloat(number))
-					number = ``
-					continue
-				}
-				if (c === `-` && number) {
-					numbers.push(Number.parseFloat(number))
-					number = `-`
-					continue
+
+					number += c
 				}
 
-				number += c
-			}
+				let prev: PointXY = { x: 0, y: 0 }
+				const edgeNodes = instructions.map<{
+					node: PointXY | null
+					edge: boolean | { c?: PointXY; s: PointXY }
+				}>(({ letter: l, numbers: ns }) => {
+					let node: PointXY | null
+					let edge: boolean | { c?: PointXY; s: PointXY }
+					switch (l) {
+						case `m`:
+							node = { x: prev.x + ns[0], y: prev.y + ns[1] }
+							edge = false
+							break
+						case `M`:
+							node = { x: ns[0], y: ns[1] }
+							edge = false
+							break
+						case `l`:
+							node = { x: prev.x + ns[0], y: prev.y + ns[1] }
+							edge = true
+							break
+						case `L`:
+							node = { x: ns[0], y: ns[1] }
+							edge = true
+							break
+						case `c`:
+							node = { x: prev.x + ns[4], y: prev.y + ns[5] }
+							edge = {
+								c: { x: prev.x + ns[0], y: prev.y + ns[1] },
+								s: { x: prev.x + ns[2], y: prev.y + ns[3] },
+							}
+							break
+						case `C`:
+							node = { x: ns[4], y: ns[5] }
+							edge = {
+								c: { x: ns[0], y: ns[1] },
+								s: { x: ns[2], y: ns[3] },
+							}
+							break
+						case `v`:
+							node = { x: prev.x, y: prev.y + ns[0] }
+							edge = true
+							break
+						case `V`:
+							node = { x: prev.x, y: ns[0] }
+							edge = true
+							break
+						case `z`:
+						case `Z`:
+							node = null
+							edge = true
+					}
+					if (node) {
+						prev = node
+					}
 
-			let prev: PointXY = { x: 0, y: 0 }
-			const edgeNodes = instructions.map<{
-				node: null | PointXY
-				edge: boolean | { c?: PointXY; s: PointXY }
-			}>(({ letter, numbers }) => {
-				let node: null | PointXY
-				let edge: boolean | { c?: PointXY; s: PointXY }
-				switch (letter) {
-					case `m`:
-						node = { x: prev.x + numbers[0], y: prev.y + numbers[1] }
-						edge = false
-						break
-					case `M`:
-						node = { x: numbers[0], y: numbers[1] }
-						edge = false
-						break
-					case `l`:
-						node = { x: prev.x + numbers[0], y: prev.y + numbers[1] }
-						edge = true
-						break
-					case `L`:
-						node = { x: numbers[0], y: numbers[1] }
-						edge = true
-						break
-					case `c`:
-						node = { x: prev.x + numbers[4], y: prev.y + numbers[5] }
-						edge = {
-							c: { x: prev.x + numbers[0], y: prev.y + numbers[1] },
-							s: { x: prev.x + numbers[2], y: prev.y + numbers[3] },
-						}
-						break
-					case `C`:
-						node = { x: numbers[4], y: numbers[5] }
-						edge = {
-							c: { x: numbers[0], y: numbers[1] },
-							s: { x: numbers[2], y: numbers[3] },
-						}
-						break
-					case `v`:
-						node = { x: prev.x, y: prev.y + numbers[0] }
-						edge = true
-						break
-					case `V`:
-						node = { x: prev.x, y: numbers[0] }
-						edge = true
-						break
-					case `z`:
-					case `Z`:
-						node = null
-						edge = true
-				}
-				if (node) {
-					prev = node
-				}
+					return { node, edge }
+				})
 
-				return { node, edge }
+				return edgeNodes
 			})
 
-			return edgeNodes
-		})
-
-	let i = 0
-	let j = 0
-	for (const shape of shapes) {
-		const jj = j
-		for (const { node, edge } of shape) {
-			setState(edgeAtoms, `subpath${j}`, edge)
-			setState(nodeAtoms, `subpath${j}`, node)
-			j++
+		let i = 0
+		let j = 0
+		for (const shape of shapes) {
+			const jj = j
+			for (const { node, edge } of shape) {
+				setState(edgeAtoms, `subpath${j}`, edge)
+				setState(nodeAtoms, `subpath${j}`, node)
+				j++
+			}
+			const numberOfNodes = j - jj
+			setState(
+				subpathKeysAtoms,
+				`path${i}`,
+				Array.from(
+					{ length: numberOfNodes },
+					(_, nodeNum) => `subpath${jj + nodeNum}`,
+				),
+			)
+			setState(pathKeysAtom, (prev) => [...prev, `path${i}`])
+			i++
 		}
-		const numberOfNodes = j - jj
-		setState(
-			subpathKeysAtoms,
-			`path${i}`,
-			Array.from(
-				{ length: numberOfNodes },
-				(_, nodeNum) => `subpath${jj + nodeNum}`,
-			),
-		)
-		setState(pathKeysAtom, (prev) => [...prev, `path${i}`])
-		i++
-	}
-}
+	},
+})
+const reset = runTransaction(resetTX)
 
 const WIDTH = 256
 const HEIGHT = 296
-export default function BezierPlayground() {
+export default function BezierPlayground(): VNode {
 	const svgRef = useAtomicRef(svgRefAtom)
 	const onPointerUp: PointerEventHandler<SVGSVGElement> = useCallback((evt) => {
 		evt.currentTarget.releasePointerCapture(evt.pointerId)
@@ -406,13 +416,13 @@ export default function BezierPlayground() {
 	return (
 		<div
 			style={{
-				display: "flex",
-				flexFlow: "column",
-				position: "relative",
-				overflow: "hidden",
-				maxWidth: "1280px",
-				width: "100vw",
-				alignItems: "center",
+				display: `flex`,
+				flexFlow: `column`,
+				position: `relative`,
+				overflow: `hidden`,
+				maxWidth: `1280px`,
+				width: `100vw`,
+				alignItems: `center`,
 			}}
 		>
 			<svg

package/templates/{base → preact-svg-editor}/src/index.tsx

@@ -1,9 +1,11 @@
+import "./style.css"
+
+import type { VNode } from "preact"
 import { render } from "preact"
 
-import "./style.css"
 import BezierPlayground from "./BezierPlayground.tsx"
 
-export function App() {
+export function App(): VNode {
 	return (
 		<>
 			<h1>Atom.io in Preact on Vite</h1>
@@ -38,11 +40,11 @@ type ResourceProps = {
 }
 function Resource(props: ResourceProps) {
 	return (
-		<a href={props.href} target="_blank" class="resource">
+		<a href={props.href} target="_blank" class="resource" rel="noreferrer">
 			<h2>{props.title}</h2>
 			<p>{props.description}</p>
 		</a>
 	)
 }
 
-render(<App />, document.getElementById("app")!)
+render(<App />, document.getElementById(`app`)!)

package/templates/{base → preact-svg-editor}/vite.config.ts

@@ -1,5 +1,6 @@
 import preact from "@preact/preset-vite"
-import { defineConfig, UserConfig } from "vite"
+import type { UserConfig } from "vite"
+import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 const config: UserConfig = defineConfig({

package/templates/react-node-backend/.turbo/turbo-build.log

@@ -0,0 +1,12 @@
+
+> react-node-backend@0.0.0 build /home/runner/work/wayforge/wayforge/packages/create-atom.io/templates/react-node-backend
+> vite build
+
+rolldown-vite v7.1.12 building for production...
+
+rendering chunks...
+computing gzip size...
+dist/index.html                   0.45 kB │ gzip:  0.29 kB
+dist/assets/index-By2j7w9s.css    2.26 kB │ gzip:  0.84 kB
+dist/assets/index-6PkP9syN.js   231.07 kB │ gzip: 71.33 kB
+✓ built in 2.62s

package/templates/react-node-backend/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/templates/react-node-backend/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?