create-routify 0.0.0-reserve → 1.2.1

package/README.md

@@ -0,0 +1,23 @@
+# Create Routify
+
+Welcome to the new Routiy CLI! This CLI currently supports both version 2 & 3 (beta) of Routify.
+
+# Get Started
+
+```sh
+npm init routify@latest
+```
+
+# CLI Options
+
+We have designed the cli to be able to be run in headless mode, as such the following options are available:
+
+> Don't worry, most users won't need these as everyting is fully graphical first!
+
+```
+npm init routify [directory-name]
+
+-h, --help          get the help menu
+-v, --version       use this to set the version of routify, e.g. 3
+-f, --force         this option bypasses directory checks, be careful as might overwrite files!
+```

package/package.json

@@ -1,32 +1,45 @@
 {
   "name": "create-routify",
-  "version": "0.0.0-reserve",
-  "description": "A powerful cli for simplifying your routify development experience",
+  "version": "1.2.1",
+  "description": "A powerful cli for super-powering your routify development experience",
   "main": "index.js",
   "type": "module",
-  "files": [],
+  "files": [
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
   "bin": {
-    "create-routify": "bin/routify-cli.js"
+    "create-routify": "./src/bin.js"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/roxiness/routify-cli.git"
+    "url": "git+https://github.com/roxiness/create-routify.git"
   },
   "homepage": "https://routify.dev",
   "keywords": [
     "routify",
-    "routify-cli",
-    "routify cli",
-    "routify kit",
-    "cli"
+    "create routify",
+    "npm init",
+    "@roxi/routify",
+    "npm init routify",
+    "routify 3",
+    "routify 2"
   ],
   "author": "ghostdevbusiness@gmail.com",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/roxiness/routify-cli/issues"
+    "url": "https://github.com/roxiness/create-routify/issues"
   },
   "dependencies": {
-    "dashargs": "^4.1.2",
-    "update-notifier": "^5.0.1"
+    "kleur": "^4.1.4",
+    "log-symbols": "^5.1.0",
+    "minimist": "^1.2.5",
+    "prompts": "^2.4.2",
+    "update-notifier": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.0.14",
+    "@types/update-notifier": "^5.1.0"
   }
-}
+}

package/src/bin.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+import updateNotifier from 'update-notifier';
+import { readFile } from 'fs/promises';
+import { run } from '../src/index.js';
+import minimist from 'minimist';
+
+const args = minimist(process.argv.slice(2));
+
+run({ args });
+
+try {
+    const pkg = await readFile('../package.json', 'utf-8');
+    updateNotifier({ pkg: JSON.parse(pkg) }).notify();
+} catch {}

package/src/index.js

@@ -0,0 +1,108 @@
+import { onCancel } from './utils/prompts.js';
+import { existsSync, readdirSync } from 'fs';
+import { mkdir } from 'fs/promises';
+import symbols from 'log-symbols';
+import { relative } from 'path';
+import { resolve } from 'path';
+import prompts from 'prompts';
+import k from 'kleur';
+
+const versions = {
+    2: () => import('./versions/two.js'),
+    3: () => import('./versions/three/index.js'),
+};
+
+const helpText = `  npm init routify [directory-name]
+
+  -h, --help          get the help menu
+  -v, --version       use this to set the version of routify, e.g. 3
+  -f, --force         this option bypasses directory checks, be careful as might overwrite files!`;
+
+async function getVersion(args) {
+    const argsVersion = args.v || args.version;
+    if (argsVersion) return argsVersion;
+
+    const { version } = await prompts(
+        {
+            type: 'select',
+            name: 'version',
+            message: 'Routify Version:',
+            choices: [
+                { title: 'Routify 2', value: 2 },
+                {
+                    title: `Routify 3 ${k.bold().magenta('[BETA]')}`,
+                    value: 3,
+                },
+            ],
+        },
+        { onCancel },
+    );
+
+    return version;
+}
+
+export const run = async ({ args }) => {
+    console.log(`  ${k.dim(`v${'1.0.0'}`)}`);
+    console.log(`  ${k.bold().magenta('Routify')} ${k.magenta().dim('CLI')}`);
+    console.log();
+
+    if (args.h || args.help) {
+        return console.log(helpText);
+    }
+
+    const version = await getVersion(args);
+    const force = args.f || args.force;
+
+    if (!Object.keys(versions).includes(version.toString()))
+        return console.log(`  ${k.red(`Version ${version} not found`)}`);
+
+    const projectName = args._[0] || '.';
+    const projectDir = resolve(projectName.toString());
+
+    if (
+        existsSync(projectDir) &&
+        readdirSync(projectDir).length > 0 &&
+        !force
+    ) {
+        const { proceed } = await prompts(
+            {
+                type: 'confirm',
+                message: `Directory is not empty, continue?`,
+                name: 'proceed',
+            },
+            { onCancel },
+        );
+
+        if (!proceed) return onCancel();
+    }
+
+    await mkdir(projectDir, { recursive: true });
+
+    await runVersion(version, { args, projectDir });
+
+    console.log();
+    console.log(`  ${k.green('All Done!')}`);
+    console.log();
+    console.log(`  Now you can:`);
+
+    let i = 1;
+
+    if (relative(process.cwd(), projectDir) != '')
+        console.log(`    ${i++}) cd ${relative(process.cwd(), projectDir)}`);
+
+    console.log(`    ${i++}) npm install`);
+    console.log(`    ${i++}) npm run dev`);
+
+    console.log();
+
+    console.log(
+        `${symbols.success} If you need help, ${k.blue(
+            'join the Discord',
+        )}: https://discord.com/invite/ntKJD5B`,
+    );
+};
+
+const runVersion = async (version, args) => {
+    const { run } = await versions[version]();
+    return run(args);
+};

package/src/utils/prompts.js

@@ -0,0 +1,10 @@
+import k from 'kleur';
+
+export const onCancel = () => {
+    console.log();
+    console.log(
+        `  ${k.bold().red('Exited')} ${k.magenta().dim('create-routify')}`,
+    );
+
+    process.exit(0);
+};

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

@@ -0,0 +1,31 @@
+<!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

@@ -0,0 +1,15 @@
+{
+    "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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,40 @@
+/// <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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,31 @@
+<!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

@@ -0,0 +1,20 @@
+{
+    "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

@@ -0,0 +1,18 @@
+{
+    "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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,3 @@
+<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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+<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

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,18 @@
+<!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

@@ -0,0 +1,16 @@
+{
+    "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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,29 @@
+<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

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