12 support runes (#18)

* isolate new templates

* change default languages

* add runes support

src/sveltekit-component/files/v2/runes/__name@classify__.svelte.template

@@ -0,0 +1,54 @@
+<script<% if (language !== "js") { %> lang="<%= language %>"<% } %>>
+	let name = $state(`<%= classify(name) %>`);
+	let message = $derived(`${name} works`);
+</script>
+
+<article>
+	{message}
+</article>
+
+<style<% if (style !== "css") { %> lang="<%= style %>"<% } %>>
+  article {
+    --some-color: rgba(0, 0, 0, 0.2);
+    box-shadow:
+      0 2px 2px 0 var(--some-color),
+      0 12px 22px 0 var(--some-color);
+    max-width: 30ch;
+    outline: 1px solid var(--some-color);
+    overflow: hidden;
+    padding: 0.5em;
+    text-align: center;
+  }
+
+  article:hover {
+    animation: tada 1s;
+  }
+
+  @keyframes tada {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20% {
+      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+</style>

src/sveltekit-component/index.ts

@@ -37,6 +37,7 @@ function normalizeOptions(options: Options): Options {
 }
 
 export default function (options: Options): Rule {
+  if (!options.runes) throw new Error('only runes mode is supported');
   const opts = normalizeOptions(options);
   const directory = opts.directory ?? 'lib/components';
   const projectRoot = (opts.projectRoot ?? '.') as Path;
@@ -46,7 +47,7 @@ export default function (options: Options): Rule {
     if (!tree.exists(normalize(join(projectRoot, 'svelte.config.js')))) {
       context.logger.warn(`no svelte configuration found in '${projectRoot}'`);
     }
-    const templateSource = apply(url('./files'), [
+    const templateSource = apply(url('./files/v2/runes'), [
       applyTemplates({ ...opts, ...strings }),
       move(normalize(join(projectRoot, 'src', parsedPath.path))),
     ]);

src/sveltekit-component/index_spec.ts

@@ -16,6 +16,9 @@ describe('sveltekit-component', () => {
     expect(tree.files).toEqual(
       jasmine.arrayWithExactContents(['/src/lib/components/Tester.svelte'])
     );
+    expect(tree.readContent('/src/lib/components/Tester.svelte')).not.toContain(
+      'export let'
+    );
   });
 
   it('works with directory', async () => {

src/sveltekit-component/schema.json

@@ -22,17 +22,22 @@
       "type": "string",
       "description": "Component script language (ts/js).",
       "enum": ["js", "ts"],
-      "default": "ts"
+      "default": "js"
     },
     "style": {
       "type": "string",
       "description": "Component style language (css/scss).",
       "enum": ["css", "scss"],
-      "default": "scss"
+      "default": "css"
     },
     "projectRoot": {
       "type": "string",
       "description": "Svelte App root directory"
+    },
+    "runes": {
+      "type": "boolean",
+      "description": "Use runes for reactivitty",
+      "default": true
     }
   },
   "additionalProperties": false,

src/sveltekit-route/files/v2/runes/+page.svelte.template

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	let { data }: { data: PageData } = $props();
+	let title = $derived(`${data.subject} - Generated`);
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<h1>{data.subject} works</h1>
+
+<style<% if (style !== "css") { %> lang="<%= style %>"<% } %>>
+  h1 {
+    all: unset;
+    display: block;
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    unicode-bidi: isolate;
+  }
+</style>

src/sveltekit-route/files/v2/runes/+page.ts.template

@@ -0,0 +1,10 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async (ctx) => {
+	console.log(`${ctx.route.id} route has a routeId.`);
+	// error(500, "oh oh problems");
+	return {
+		subject: '<%= name %> route'
+	};
+};

src/sveltekit-route/index.ts

@@ -40,10 +40,11 @@ function normalizeOptions(o: Options): Required<Options> {
   const endpoint = o.endpoint ?? false;
   const skipTests = o.skipTests ?? false;
   const projectRoot = o.projectRoot ?? '.';
-  return { ...o, path, style, skipTests, endpoint, projectRoot };
+  return { ...o, path, style, skipTests, endpoint, projectRoot, runes: true };
 }
 
 export default function (opts: Options): Rule {
+  if (!opts.runes) throw new Error('only runes mode is supported');
   return async (tree: Tree, context: SchematicContext) => {
     const options = normalizeOptions(opts);
     if (!tree.exists(join(options.projectRoot as Path, 'svelte.config.js'))) {
@@ -53,7 +54,7 @@ export default function (opts: Options): Rule {
     const parsedPath = parseName(options.path, options.name);
     options.name = parsedPath.name;
     options.path = parsedPath.path;
-    const templateSource = apply(url('./files/v0'), [
+    const templateSource = apply(url('./files/v2/runes'), [
       applyTemplates({
         ...strings,
         ...options,

src/sveltekit-route/index_spec.ts

@@ -20,6 +20,9 @@ describe('sveltekit-route', () => {
         '/tests/tester.spec.ts',
       ])
     );
+    expect(tree.readContent('/src/routes/tester/+page.svelte')).toContain(
+      '$props()'
+    );
   });
 });
 

src/sveltekit-route/schema.json

@@ -26,7 +26,7 @@
     "style": {
       "description": "The value of style element lang attribute",
       "type": "string",
-      "default": "scss",
+      "default": "css",
       "enum": ["css", "scss", "none"],
       "x-user-analytics": 5
     },
@@ -49,6 +49,11 @@
       },
       "description": "The path to your project root, relative to the current workspace. Default is workingDirectory",
       "visible": false
+    },
+    "runes": {
+      "type": "boolean",
+      "description": "Use runes for reactivitty",
+      "default": true
     }
   },
   "required": ["name"]