npm - create-routify - Versions diffs - 1.3.2 → 1.4.0 - Mend

create-routify 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-routify",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "A powerful cli for super-powering your routify development experience",
   "main": "index.js",
   "type": "module",
@@ -32,6 +32,7 @@
     "url": "https://github.com/roxiness/create-routify/issues"
   },
   "dependencies": {
+    "@roxi/routify": "^3.0.0-next.171",
     "kleur": "^4.1.5",
     "log-symbols": "^5.1.0",
     "minimist": "^1.2.7",

package/src/versions/three/index.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import { onCancel } from '../../utils/prompts.js';
-import { readdir, cp } from 'fs/promises';
+import { readdir, cp, rm } from 'fs/promises';
 import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath, pathToFileURL } from 'url';
 import prompts from 'prompts';
 import k from 'kleur';
+import { getRoutifyExamplesDir } from './utils.js';
+import { existsSync } from 'fs';
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -31,51 +33,41 @@ function text() {
 }
 async function getExampleDir() {
-    const projects = await readdir(join(__dirname, './examples'));
+    const routifyExamplesDir = getRoutifyExamplesDir();
+    let dirNames = await readdir(routifyExamplesDir);
+    const projects = await Promise.all(
+        dirNames
+            .map((name) => join(routifyExamplesDir, name))
+            .filter((dir) => existsSync(join(dir, 'manifest.js')))
+            .map((dir) =>
+                import(pathToFileURL(join(dir, 'manifest.js')).pathname).then(
+                    (m) => ({ dir, manifest: m.default }),
+                ),
+            ),
+    );
     const { project } = await prompts(
         {
-            message: 'Please select a example project',
+            message: 'Please select a starter template',
             name: 'project',
             type: 'select',
-            choices: projects.map((value) => ({ title: value, value })),
+            choices: projects.map((value) => ({
+                title: value.manifest.name,
+                description: value.manifest.description,
+                value,
+            })),
         },
         { onCancel },
     );
-    return `./examples/${project}`;
+    return project.dir;
 }
 export const run = async ({ projectDir }) => {
     text();
-    const { projectType } = await prompts(
-        {
-            type: 'select',
-            name: 'projectType',
-            message: 'What template would you like?',
-            choices: [
-                {
-                    title: 'Skeleton Project',
-                    value: 'skeleton',
-                },
-                {
-                    title: 'Example Project',
-                    value: 'example',
-                },
-            ],
-        },
-        { onCancel },
-    );
-    if (!['skeleton', 'example'].includes(projectType))
-        return console.log(`  ${k.red('Unable to find type ' + projectType)}`);
-    const exampleDir = join(
-        __dirname,
-        projectType == 'skeleton' ? './skeleton' : await getExampleDir(),
-        '/',
-    );
+    const exampleDir = await getExampleDir();
     await cp(exampleDir, projectDir, { recursive: true });
+    await rm(join(projectDir, 'manifest.js'));
 };

package/src/versions/three/utils.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { createRequire } from 'module';
+import { resolve } from 'path';
+const require = createRequire(import.meta.url);
+/**
+ * Returns the directory of @roxi/routify/examples
+ */
+export const getRoutifyExamplesDir = () => {
+    const routifyPkgJsonPath = require.resolve('@roxi/routify/package.json');
+    return resolve(routifyPkgJsonPath, '..', 'examples');
+};

package/src/versions/three/examples/buildtime-data/index.html DELETED Viewed

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <title>Svelte app</title>
-        <!-- Google Fonts -->
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
-        />
-        <!-- CSS Reset -->
-        <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
-        />
-        <!-- Milligram CSS -->
-        <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
-        />
-        <script type="module" src="/src/main.js"></script>
-    </head>
-    <body></body>
-</html>

package/src/versions/three/examples/buildtime-data/package.json DELETED Viewed

@@ -1,15 +0,0 @@
-{
-    "type": "module",
-    "scripts": {
-        "build": "vite build",
-        "preview": "vite preview",
-        "dev": "vite"
-    },
-    "devDependencies": {
-        "@roxi/routify": "^3.0.0-next.1",
-        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.13",
-        "mdsvex": "^0.9.3",
-        "svelte": "^3.39.0",
-        "vite": "^2.2.3"
-    }
-}

package/src/versions/three/examples/buildtime-data/src/App.svelte DELETED Viewed

@@ -1,6 +0,0 @@
-<script>
-    import { Router } from '@roxi/routify'
-    import routes from '../.routify/routes.default.js'
-</script>
-<Router {routes} />

package/src/versions/three/examples/buildtime-data/src/main.js DELETED Viewed

@@ -1,5 +0,0 @@
-import App from './App.svelte'
-const app = new App({ target: document.body })
-export default app

package/src/versions/three/examples/buildtime-data/src/routes/index.meta.js DELETED Viewed

@@ -1,40 +0,0 @@
-/// <reference types="@roxi/routify" />
-/**
- * [file].meta.js files provides metadata for nodes.
- * They can be used instead of - or along with - inlined metadata.
- *
- * Meta entries can use directives which enhance functionality.
- * These can be added to the entry name with a pipe, Eg.:
- *
- * `'routify|scoped': 'version 3'`
- *
- * Here the entry would be available as `meta.routify` in the respective node
- * and all its descendants.
- *
- * Current directives are:
- * - scoped: provides the meta entry to all descendant nodes
- * - split: uses codesplitting / dynamic import for the value. Entries that
- *          use the split tag must be accessed with `await` or `entry.then()`
- */
-import axios from 'axios'
-/**
- * @param {MetaContext} context
- */
-export default async ({ split }) => {
-    // fetch luke skywalker data
-    const luke = (await axios.get('https://swapi.dev/api/people/1/')).data
-    const { name, gender, ...rest } = luke
-    return {
-        luke: {
-            name,
-            gender,
-            // we're using `split` to exclude `rest` from the Routify bundle
-            // we can access it from our app with `await meta.luke.data()`
-            data: split(rest),
-        },
-    }
-}

package/src/versions/three/examples/buildtime-data/src/routes/index.svelte DELETED Viewed

@@ -1,26 +0,0 @@
-<script>
-    import { meta } from '@roxi/routify'
-    let show
-    console.log($meta)
-</script>
-<h1>Routify 3 App</h1>
-<h4>Plain meta</h4>
-<pre>
-    {JSON.stringify($meta, null, 2)}
-</pre>
-<br />
-<br />
-{#if !show}
-    <button on:click={() => (show = true)}>show dynamic imported meta</button>
-{:else}
-    <h4>dynamic imported meta</h4>
-    <pre>
-    {#await $meta.luke.data() then data}
-    {JSON.stringify(data, null, 2)}
-    {/await}
-</pre>
-{/if}

package/src/versions/three/examples/buildtime-data/vite.config.js DELETED Viewed

@@ -1,24 +0,0 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import routify from '@roxi/routify/vite-plugin'
-import { defineConfig } from 'vite'
-import { mdsvex } from 'mdsvex'
-const production = process.env.NODE_ENV === 'production'
-export default defineConfig({
-    clearScreen: false,
-    plugins: [
-        routify(),
-        svelte({
-            emitCss: true,
-            compilerOptions: {
-                dev: !production,
-            },
-            extensions: ['.md', '.svelte'],
-            preprocess: [mdsvex({ extension: 'md' })],
-        }),
-    ],
-    server: { port: 1337 },
-})

package/src/versions/three/examples/experiment/index.html DELETED Viewed

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <title>Svelte app</title>
-        <!-- Google Fonts -->
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
-        />
-        <!-- CSS Reset -->
-        <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
-        />
-        <!-- Pico.css -->
-        <link
-            rel="stylesheet"
-            href="https://unpkg.com/@picocss/pico@1.3.3/css/pico.css"
-        />
-        <script type="module" src="/src/main.js"></script>
-    </head>
-    <body></body>
-</html>

package/src/versions/three/examples/experiment/jsconfig.json DELETED Viewed

@@ -1,20 +0,0 @@
-{
-    "compilerOptions": {
-         "checkJs": true,
-        "baseUrl": ".",
-        "paths": {
-            "#cmp/*": ["./src/cmp/*"],
-            "#root/*": ["./*"]
-        },
-        "target": "esnext",
-        "moduleResolution": "node"
-    },
-    "exclude": [
-        "**/node_modules",
-        "**/dist",
-        "**/example",
-        "**/temp",
-        "**/output",
-        "**/.history"
-    ]
-}

package/src/versions/three/examples/experiment/package.json DELETED Viewed

@@ -1,18 +0,0 @@
-{
-    "type": "module",
-    "imports": {
-        "#cmp/*": "./src/components/*"
-    },
-    "scripts": {
-        "build": "vite build",
-        "preview": "vite preview",
-        "dev": "vite"
-    },
-    "devDependencies": {
-        "@roxi/routify": "^3.0.0-next.1",
-        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.13",
-        "mdsvex": "^0.9.3",
-        "svelte": "^3.39.0",
-        "vite": "^2.2.3"
-    }
-}

package/src/versions/three/examples/experiment/src/App.svelte DELETED Viewed

@@ -1,6 +0,0 @@
-<script>
-    import { Router } from '@roxi/routify'
-    import routes from '../.routify/routes.default.js'
-</script>
-<Router {routes} />

package/src/versions/three/examples/experiment/src/main.js DELETED Viewed

@@ -1,5 +0,0 @@
-import App from './App.svelte'
-const app = new App({ target: document.body })
-export default app

package/src/versions/three/examples/experiment/src/routes/[page].svelte DELETED Viewed

@@ -1,41 +0,0 @@
-<script>
-    import { node, params } from '@roxi/routify'
-    import Nav from './_navigation.svelte'
-    const pages = $node.traverse('../pages')
-    $: index = pages.children.findIndex(page => page.name === $params.page)
-</script>
-<div class="app-wrapper" style="--page-index: {index}">
-    <div id="app">
-        {#each pages.children as page}
-            <article class="page">
-                <svelte:component this={page.traverse('./index').component} />
-            </article>
-        {/each}
-    </div>
-</div>
-<Nav {pages} />
-<style>
-    :global(html),
-    :global(body),
-    .app-wrapper,
-    #app {
-        height: 100%;
-    }
-    .app-wrapper {
-        overflow: hidden;
-    }
-    #app {
-        display: flex;
-        flex-direction: row;
-        transform: translateX(calc(25% + -50% * var(--page-index)));
-        transition: all 0.3s;
-    }
-    article {
-        margin-left: 20px;
-        margin-right: 20px;
-        flex: 0 0 50%;
-    }
-</style>

package/src/versions/three/examples/experiment/src/routes/_navigation.svelte DELETED Viewed

@@ -1,17 +0,0 @@
-<script>
-    export let pages
-</script>
-<nav>
-    {#each pages.children as page}
-        <a href="/{page.name}">{page.name}</a>
-    {/each}
-</nav>
-<style>
-    nav {
-        position: absolute;
-        bottom: 0;
-        /* background: white; */
-    }
-</style>

package/src/versions/three/examples/experiment/src/routes/index.svelte DELETED Viewed

@@ -1,3 +0,0 @@
-<script context="module">
-    export const guard = ctx => ctx.router.url.replace('/home')
-</script>

package/src/versions/three/examples/experiment/src/routes/pages/contact/index.md DELETED Viewed

	@@ -1 +0,0 @@
1	- # Contact

package/src/versions/three/examples/experiment/src/routes/pages/gallery/galcontent/foo.svelte DELETED Viewed

	@@ -1 +0,0 @@
1	- foo

package/src/versions/three/examples/experiment/src/routes/pages/gallery/galcontent/index.md DELETED Viewed

@@ -1,3 +0,0 @@
-# hello
-[foo](/foo)

package/src/versions/three/examples/experiment/src/routes/pages/gallery/index.svelte DELETED Viewed

@@ -1,15 +0,0 @@
-<script>
-    import { Router } from '@roxi/routify'
-    export let context
-    let instance, router
-    const galcontentNode = context.node.traverse('../galcontent')
-    $: console.log('instance', instance)
-    $: console.log('router', router)
-    console.log('galcontentNode', galcontentNode)
-</script>
-<h1>Gallery</h1>
-r
-<Router rootNode={galcontentNode} name="box" bind:instance bind:router />
-/r

package/src/versions/three/examples/experiment/src/routes/pages/home/index.md DELETED Viewed

	@@ -1 +0,0 @@
1	- # Home

package/src/versions/three/examples/experiment/vite.config.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import { mdsvex } from 'mdsvex'
-import routify from '@roxi/routify/vite-plugin'
-const production = process.env.NODE_ENV === 'production'
-export default defineConfig({
-    clearScreen: false,
-    plugins: [
-        routify(),
-        svelte({
-            emitCss: true,
-            compilerOptions: {
-                dev: !production,
-            },
-            extensions: ['.md', '.svelte'],
-            preprocess: [mdsvex({ extension: 'md' })],
-        }),
-    ],
-    server: { port: 1337 },
-    resolve: {
-        alias: {
-            '#cmp': process.cwd() + '/src/components',
-        },
-    },
-})

package/src/versions/three/examples/kitchensink/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Svelte app</title>
-    <!-- Pico.css -->
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.3.3/css/pico.css" />
-    <script type="module" src="/src/main.js"></script>
-</head>
-<body></body>
-</html>

package/src/versions/three/examples/kitchensink/package.json DELETED Viewed

@@ -1,16 +0,0 @@
-{
-    "name": "kitchensink",
-    "type": "module",
-    "scripts": {
-        "build": "vite build",
-        "preview": "vite preview",
-        "dev": "vite"
-    },
-    "devDependencies": {
-        "@roxi/routify": "^3.0.0-next.1",
-        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.13",
-        "mdsvex": "^0.9.3",
-        "svelte": "^3.39.0",
-        "vite": "^2.2.3"
-    }
-}

package/src/versions/three/examples/kitchensink/src/App.svelte DELETED Viewed

@@ -1,6 +0,0 @@
-<script>
-    import { Router } from '@roxi/routify'
-    import routes from '../.routify/routes.default.js'
-</script>
-<Router {routes} />

package/src/versions/three/examples/kitchensink/src/components/Navigation.svelte DELETED Viewed

@@ -1,29 +0,0 @@
-<script>
-    import { isActive, node } from '@roxi/routify'
-    export let pages
-    $: liveUrl = index => pages && pages[index]?.router?.url.external()
-</script>
-<nav class="container">
-    <ul>
-        <li>
-            <h1>
-                <a href="/">Portfolio</a>
-            </h1>
-        </li>
-    </ul>
-    <ul>
-        {#each $node.pages as childNode, index}
-            <li class:isActive={$isActive(childNode.path)}>
-                <a href={liveUrl(index) || childNode.path}
-                    >{childNode.meta.title || childNode.name}</a>
-            </li>
-        {/each}
-    </ul>
-</nav>
-<style>
-    .isActive a {
-        text-decoration: underline;
-    }
-</style>

package/src/versions/three/examples/kitchensink/src/main.js DELETED Viewed

@@ -1,5 +0,0 @@
-import App from './App.svelte'
-const app = new App({ target: document.body })
-export default app

package/src/versions/three/examples/kitchensink/src/routes/_module.svelte DELETED Viewed

@@ -1,8 +0,0 @@
-<script>
-    import Navigation from '../components/Navigation.svelte'
-</script>
-<Navigation />
-<div class="root-module container">
-    <slot />
-</div>

package/src/versions/three/examples/kitchensink/src/routes/composition/index.svelte DELETED Viewed

@@ -1,5 +0,0 @@
-<script>
-    import { url } from '@roxi/routify'
-</script>
-<a href={$url('../reset')}>reset</a>

package/src/versions/three/examples/kitchensink/src/routes/composition/reset/_module.svelte DELETED Viewed

	@@ -1,2 +0,0 @@
1	- <slot />
2	- <!-- routify:meta reset -->

package/src/versions/three/examples/kitchensink/src/routes/composition/reset/index.svelte DELETED Viewed

@@ -1,7 +0,0 @@
-<script>
-    import { url } from '@roxi/routify'
-</script>
-# I'm all alone!
-<a href={$url('../..')}>Go back</a>
-<!-- [go back](/composition) -->

package/src/versions/three/examples/kitchensink/src/routes/index.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- # Routify 3 Kitchen Sink
2	-

package/src/versions/three/examples/kitchensink/src/routes/multi-router/_module.md DELETED Viewed

@@ -1,4 +0,0 @@
-[basic](/multi-router/basic)
-[rootNode](/multi-router/rootnode)
-<slot />

package/src/versions/three/examples/kitchensink/src/routes/multi-router/basic.svelte DELETED Viewed

@@ -1,13 +0,0 @@
-<script>
-    import { Router, activeRoute } from '@roxi/routify'
-    const hasNestedRouter = $activeRoute.router.name === 'nested'
-</script>
-{#if !hasNestedRouter}
-    <article>
-        <Router name="nested" />
-    </article>
-{:else}
-    <p>We could nest routers inifintely, but let's not...</p>
-{/if}

package/src/versions/three/examples/kitchensink/src/routes/multi-router/index.svelte DELETED Viewed

File without changes

package/src/versions/three/examples/kitchensink/src/routes/multi-router/rootnode.svelte DELETED Viewed

@@ -1,15 +0,0 @@
-<script>
-    import { Router, activeRoute } from '@roxi/routify'
-    const { router } = $activeRoute
-    const hasNestedRouter = router.name === 'nested'
-    const rootNode = router.instance.nodeIndex.find(node => node.path === '/composition')
-</script>
-{#if !hasNestedRouter}
-    <article>
-        <Router name="rootnode" {rootNode} />
-    </article>
-{:else}
-    <p>We could nest routers inifintely, but let's not...</p>
-{/if}

package/src/versions/three/examples/kitchensink/src/routes/redirect/index.svelte DELETED Viewed

@@ -1,10 +0,0 @@
-<script context="module">
-    /** @type {RoutifyLoad} */
-    const load = () => {
-        return {
-            redirect: '/composition',
-        }
-    }
-    export { load }
-</script>