create-nuclo 0.1.1

package/templates/basic/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuclo-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "nuclo": "^0.2.13"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14"
+  }
+}

package/templates/basic/public/nuclo-logo.svg

@@ -0,0 +1,24 @@
+<svg width="292" height="80" viewBox="0 0 292 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_415_313)">
+<path d="M116 57V41C116 33.268 109.732 27 102 27C94.268 27 88 33.268 88 41L88 57" stroke="black" stroke-width="10" stroke-linecap="round"/>
+<path d="M228 11V57" stroke="black" stroke-width="10" stroke-linecap="round"/>
+<path d="M136 27L136 43C136 50.732 142.268 57 150 57C157.732 57 164 50.732 164 43L164 27" stroke="black" stroke-width="10" stroke-linecap="round"/>
+<path d="M208 31C205.439 28.4388 201.965 27 198.343 27L198.142 27C190.332 27 184 33.3316 184 41.1421L184 42.8579C184 50.6683 190.332 57 198.142 57L198.343 57C201.965 57 205.439 55.5612 208 53" stroke="black" stroke-width="10" stroke-linecap="round"/>
+<g clip-path="url(#clip1_415_313)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1818 32.8815C28.5623 32.286 26.7782 32.2697 25.1377 32.8487C21.9277 33.9767 18.3556 35.7836 14.984 38.01C12.2888 33.2027 10.2052 27.6886 9.21674 20.5862C8.80288 17.631 10.1961 14.7146 12.7552 13.1797C18.4116 9.78931 25.753 6.43426 32.8173 6.00208C35.5799 5.84349 38.2022 7.23084 39.6254 9.60378C42.1464 13.8171 43.5224 19.8578 43.9024 25.7687C44.148 29.5885 43.9776 33.354 43.4314 36.5371C43.1524 38.1768 42.334 39.6666 41.1196 40.7779C38.0928 37.5657 34.6739 34.9934 30.8122 33.1467C30.6054 33.0483 30.395 32.9598 30.1818 32.8815Z" fill="#FF2300"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.367 46.7361C28.7112 48.0072 29.3898 49.1757 30.3474 50.1119C32.9176 52.6318 36.3484 55.1797 40.0701 57.2937C37.2035 61.8769 33.4404 66.2777 27.839 70.502C25.458 72.3008 22.2322 72.5017 19.6465 71.012C13.9333 67.7183 7.43146 62.9351 3.61836 56.9725C2.13633 54.6358 2.07333 51.6698 3.45466 49.2723C5.82517 45.1676 10.203 41.1671 14.9839 38.01C18.3555 35.7835 21.9277 33.9766 25.1377 32.8486C26.7781 32.2696 28.5623 32.2859 30.1818 32.8814C28.7825 36.8189 28.0631 40.8192 28.1091 44.8892C28.1173 45.5185 28.2052 46.1386 28.367 46.7361Z" fill="#FF5F00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3669 46.7361C28.2052 46.1386 28.1173 45.5185 28.1091 44.8892C28.0631 40.8192 28.7824 36.8189 30.1818 32.8814C30.395 32.9598 30.6054 33.0482 30.8121 33.1466C34.6739 34.9934 38.0927 37.5657 41.1196 40.7778C40.8966 40.9819 40.6602 41.1732 40.4114 41.3504C36.821 43.8967 32.7881 45.6606 28.3669 46.7361Z" fill="#FF815E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.0702 57.2937C36.3484 55.1798 32.9177 52.6318 30.3475 50.1121C29.3898 49.1758 28.7112 48.0073 28.367 46.7362C32.7881 45.6607 36.8211 43.8968 40.4114 41.3505C40.6602 41.1733 40.8966 40.982 41.1197 40.7779C42.334 39.6666 43.1524 38.1768 43.4314 36.5372C43.9776 33.3542 44.1479 29.5886 43.9024 25.7688C49.826 26.1709 55.9788 27.55 62.9379 31.0612C65.6032 32.4031 67.208 35.2087 67.0132 38.1864C66.5809 44.7669 65.1605 52.7127 61.4945 58.7668C60.0524 61.1284 57.4191 62.4947 54.658 62.3141C50.1214 62.0126 44.8553 60.0118 40.0702 57.2937Z" fill="#FF3F00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.0788 22.5574C25.325 21.7777 25.9371 21.1678 26.7176 20.9243C27.4982 20.6809 28.3484 20.8346 28.9943 21.3361C37.156 27.7329 45.1846 35.1354 52.2217 42.752C52.7738 43.3551 52.996 44.1901 52.8165 44.9878C52.6371 45.7855 52.0788 46.4449 51.3216 46.7535C41.701 50.6234 31.2759 53.8751 21.1612 56.1611C20.3628 56.3377 19.5287 56.1127 18.9276 55.5584C18.3264 55.0041 18.0344 54.191 18.1458 53.3809C19.6048 43.1142 22.0012 32.46 25.0788 22.5574Z" fill="black"/>
+</g>
+<path d="M263 22C274.046 22 283 30.9543 283 42C283 53.0457 274.046 62 263 62C251.954 62 243 53.0457 243 42C243 30.9543 251.954 22 263 22ZM263 32C257.477 32 253 36.4772 253 42C253 47.5228 257.477 52 263 52C268.523 52 273 47.5228 273 42C273 36.4772 268.523 32 263 32Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_415_313">
+<rect width="292" height="80" fill="white"/>
+</clipPath>
+<clipPath id="clip1_415_313">
+<rect width="80" height="80" fill="white" transform="translate(-7)"/>
+</clipPath>
+</defs>
+</svg>

package/templates/basic/public/site.webmanifest

@@ -0,0 +1,23 @@
+{
+  "name": "Nuclo App",
+  "short_name": "Nuclo App",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#FF3F00",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

package/templates/basic/src/app.ts

@@ -0,0 +1,37 @@
+import "nuclo";
+import { styles as s } from "./styles";
+
+let count = 0;
+
+export const app = div(
+	s.app,
+
+	h1(s.heading, img(
+		s.logo,
+		{
+			src: "/nuclo-logo.svg",
+			alt: "Nuclo logo",
+			width: 146,
+			height: 40,
+		}
+	),
+	),
+	p(
+		"Edit ",
+		code(s.code, "src/app.ts"),
+		" and save to reload."
+	),
+	button(
+		s.button,
+		on("click", () => {
+			count++;
+			update();
+		}),
+		() => `Count: ${count}`
+	),
+	div(
+		s.links,
+		a(s.link, { href: "https://nuclo.dev", target: "_blank", rel: "noopener noreferrer" }, "Docs"),
+		a(s.link, { href: "https://github.com/dan2dev/nuclo", target: "_blank", rel: "noopener noreferrer" }, "GitHub")
+	)
+);

package/templates/basic/src/main.ts

@@ -0,0 +1,5 @@
+import "nuclo";
+import { app } from "./app";
+
+const appRoot = document.querySelector<HTMLDivElement>("#app")!;
+render(app, appRoot);

package/templates/basic/src/styles.ts

@@ -0,0 +1,85 @@
+import "nuclo";
+
+// Themed styling instance — tokens autocomplete inside css() calls.
+export const { css, globalStyle } = createCss({
+  colors: {
+    text: "#1a1a1a",
+    textMuted: "#737373",
+    background: "#ffffff",
+    surface: "#fff5f2",
+    border: "#ffd5c8",
+    primary: "#FF3F00",
+    primaryHover: "#cc3200",
+    success: "#10b981",
+    danger: "#dc2626",
+    code: "#fff0eb",
+  },
+  fonts: {
+    body: "system-ui, -apple-system, sans-serif",
+  },
+});
+
+globalStyle("body", {
+  m: 0,
+  font: "body",
+  color: "text",
+  bg: "background",
+});
+
+export const styles = {
+  app: css({
+    maxW: "28rem",
+    mx: "auto",
+    my: "4rem",
+    px: "1.5rem",
+    align: "center",
+	}),
+
+  heading: css({
+		fontSize: "2rem",
+		flexDirection: "row",
+		flexWrap: "nowrap",
+		fontWeight: 700,
+    lineHeight: 1.2,
+    color: "text",
+  }),
+
+  logo: css({
+    display: "block",
+    mx: "auto",
+    mb: "1.5rem",
+  }),
+
+  button: css({
+    border: "none",
+    rounded: 8,
+    py: "0.6rem",
+    px: "1.2rem",
+    text: "1rem",
+    weight: 600,
+    color: "#ffffff",
+    bg: "primary",
+    cursor: "pointer",
+    hover: { bg: "primaryHover" },
+  }),
+
+  code: css({
+    bg: "code",
+    rounded: 4,
+    py: "0.1rem",
+    px: "0.35rem",
+  }),
+
+  links: css({
+    row: true,
+    center: true,
+    gap: "1rem",
+    mt: "2rem",
+  }),
+
+  link: css({
+    color: "textMuted",
+    textDecoration: "none",
+    hover: { color: "primary" },
+  }),
+};

package/templates/basic/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "nuclo/types"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/basic/vite.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({});