npm - create-routify - Versions diffs - 0.0.0-reserve → 1.2.1 - Mend

create-routify 0.0.0-reserve → 1.2.1

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 (112) hide show

package/src/versions/three/examples/portfolio/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "@example/portfolio",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview"
+  },
+  "dependencies": {
+    "@roxi/routify": "^3.0.0-next.53",
+    "marked": "^4.0.0",
+    "axios": "^0.24.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^1.0.0-next.31",
+    "@sveltejs/kit": "next",
+    "svelte": "^3.34.0"
+  },
+  "type": "module",
+  "routify": {
+    "routesDir": "src/pages"
+  }
+}

package/src/versions/three/examples/portfolio/src/app.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%svelte.head%
+	<!-- Pico.css -->
+	<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.3.3/css/pico.css" />
+</head>
+<body>
+	<div id="svelte">%svelte.body%</div>
+</body>
+</html>

package/src/versions/three/examples/portfolio/src/global.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="@sveltejs/kit" />

package/src/versions/three/examples/portfolio/src/pages/1.home/index.svelte ADDED Viewed

@@ -0,0 +1,3 @@
+<header>
+    <h1>Svelte Summit 2021</h1>
+</header>

package/src/versions/three/examples/portfolio/src/pages/2.projects/[project].svelte ADDED Viewed

@@ -0,0 +1,41 @@
+<script context="module">
+    export const load = async ({ route, node }) => {
+        const { meta } = node.traverse('..')
+        const { project } = route.params
+        const repo = meta.repos.find(repo => repo.data.name === project)
+        // await new Promise(resolve => setTimeout(resolve, 500))
+        if (repo)
+            return {
+                readme: await repo.readme(),
+            }
+    }
+</script>
+<script>
+    import { url } from '@roxi/routify'
+    export let context
+</script>
+<article class="project">
+    <div>
+        {@html context.load.readme}
+    </div>
+</article>
+<a class="close" href={$url('../')}> <button> close </button></a>
+<style>
+    article {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        overflow: auto;
+    }
+    .close {
+        position: absolute;
+        top: 56px;
+        right: 32px;
+        display: inline-block;
+    }
+</style>

package/src/versions/three/examples/portfolio/src/pages/2.projects/_module.meta.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { fetchRepos, fixGithubImages, parseReadme } from '../../utils/github.js'
+const isProduction = process.env.NODE_ENV === 'production' && true
+const reponames = [
+    'roxiness/routify',
+    'roxiness/configent',
+    'roxiness/tossr',
+    'roxiness/stackmix',
+    'roxiness/poindexter',
+    'jakobrosenberg/consolite',
+]
+/**
+ * @param {MetaContext} context
+ */
+export default async ({ split, persist }) => {
+    /**
+     *  Github has a rate limit of 60 requests pr hour.
+     *  To get around this we persist the return call.
+     *  This will save our data to disk and use it on subsequent requests.
+     */
+    const repos = await persist(() => fetchRepos(reponames), isProduction)
+    repos.forEach(parseReadme)
+    repos.forEach(fixGithubImages)
+    /**
+     * To keep the bundle light, we'll code-split (dynamic import) the individual readme's.
+     */
+    repos.forEach(repo => (repo.readme = split(repo.readme)))
+    return { repos }
+}

package/src/versions/three/examples/portfolio/src/pages/2.projects/_module.svelte ADDED Viewed

@@ -0,0 +1,28 @@
+<script>
+    import { meta, url } from '@roxi/routify'
+</script>
+<div class="page">
+    <h1>projects</h1>
+    <ul class="projects">
+        {#each $meta.repos as repo}
+            <div>
+                <h3>
+                    <a href={$url('./[project]', { project: repo.data.name })}>
+                        {repo.data.name}
+                    </a>
+                    <p>
+                        {repo.data.description || ''}
+                    </p>
+                </h3>
+            </div>
+        {/each}
+    </ul>
+    <slot />
+</div>
+<style>
+    .page {
+        position: relative;
+    }
+</style>

package/src/versions/three/examples/portfolio/src/pages/3.about-me/_module.svelte ADDED Viewed

@@ -0,0 +1,3 @@
+<!-- routify:meta title="about me" -->
+<slot />

package/src/versions/three/examples/portfolio/src/pages/3.about-me/index.svelte ADDED Viewed

	@@ -0,0 +1 @@
1	+ about me

package/src/versions/three/examples/portfolio/src/pages/_loader.svelte ADDED Viewed

@@ -0,0 +1,15 @@
+<script>
+    import { pendingRoute } from '@roxi/routify'
+    $: value = $pendingRoute && 0
+    setInterval(() => value++, 10)
+</script>
+{#if $pendingRoute}
+    <progress {value} max="100" />
+{/if}
+<style>
+    progress {
+        position: fixed;
+    }
+</style>

package/src/versions/three/examples/portfolio/src/pages/_module.svelte ADDED Viewed

@@ -0,0 +1,41 @@
+<script>
+    import { InlineNav } from '@roxi/routify/lib/components/index'
+    import Navigation from './_navigation.svelte'
+    import Loader from './_loader.svelte'
+</script>
+<Loader />
+<InlineNav let:pages let:index>
+    <Navigation {pages} />
+    <div class="container" style="--page-index: {index}">
+        {#each pages as { Page, router }}
+            <div
+                class="page"
+                on:click={history.pushState(null, null, router.url.external())}>
+                <Page />
+            </div>
+        {/each}
+    </div>
+</InlineNav>
+<style>
+    :global(*) {
+        max-height: 100%;
+    }
+    :global(html),
+    :global(body) {
+        overflow: hidden;
+    }
+    .container {
+        transition: transform 0.3s;
+        transform: translateX(calc(-100% * var(--page-index)));
+        display: flex;
+        padding: 0 40px;
+    }
+    .page {
+        flex: 0 0 100%;
+        margin-right: 80px;
+        max-height: calc(100vh - 100px);
+        overflow-y: auto;
+    }
+</style>

package/src/versions/three/examples/portfolio/src/pages/_navigation.svelte ADDED Viewed

@@ -0,0 +1,30 @@
+<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>
+    .container {
+        padding: 0 40px;
+    }
+    .isActive a {text-decoration: underline;}
+</style>

package/src/versions/three/examples/portfolio/src/pages/index.svelte ADDED Viewed

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

package/src/versions/three/examples/portfolio/src/routes/[...index].svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script context="module">
+    import { Router, createRouter } from '@roxi/routify'
+    import routes from '../../.routify/routes.default.js'
+    const router = createRouter({ routes })
+    /* for SSR we need to tell Sveltekit to wait for
+       Routify to finish loading its components */
+    export const load = ({ page }) => router.url.replace(page.path)
+</script>
+<Router {router} />

package/src/versions/three/examples/portfolio/src/utils/github.js ADDED Viewed

@@ -0,0 +1,21 @@
+import axios from 'axios'
+axios.interceptors.response.use(res => res.data)
+import { parse } from 'marked'
+export const fetchRepo = async reponame => ({
+    data: await axios('https://api.github.com/repos/' + reponame),
+    readme: await axios(`https://raw.githubusercontent.com/${reponame}/master/README.md`),
+})
+export const fetchRepos = async reponames => Promise.all(reponames.map(fetchRepo))
+export const parseReadme = repo => (repo.readme = parse(repo.readme))
+export const fixGithubImages = repo => {
+    const { default_branch, html_url } = repo.data
+    repo.readme = repo.readme.replace(/<img src="(.+?)"/gm, (full, path) => {
+        const isAbsolute = path.match(/^(\/\/|\w+:)/)
+        return isAbsolute ? full : `<img src="${html_url}/raw/${default_branch}/${path}"`
+    })
+}

package/src/versions/three/examples/portfolio/static/favicon.png ADDED Viewed

Binary file

package/src/versions/three/examples/portfolio/svelte.config.js ADDED Viewed

@@ -0,0 +1,26 @@
+import routify from '@roxi/routify/vite-plugin'
+import indexByName from '@roxi/routify/plugins/indexByName.js'
+import vercel from '@sveltejs/adapter-vercel'
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {
+        // hydrate the <div id="svelte"> element in src/app.html
+        target: '#svelte',
+        adapter: vercel(),
+        vite: {
+            plugins: [
+                routify({
+                    plugins: [indexByName()],
+                }),
+            ],
+            resolve: {
+                dedupe: ['svelte'],
+            },
+        },
+        router: false,
+    },
+}
+export default config

package/src/versions/three/examples/subpath/index.html ADDED Viewed

@@ -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/subpath/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+    "name": "subpath",
+    "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/subpath/src/App.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import { Router } from '@roxi/routify'
+    import routes from '../.routify/routes.default.js'
+    /** @type {UrlRewrite}*/
+    const urlRewrite = {
+        toExternal: url => '/subpath' + url,
+        toInternal: url => url.replace(/^\/subpath/, ''),
+    }
+</script>
+<Router {routes} {urlRewrite} />

package/src/versions/three/examples/subpath/src/main.js ADDED Viewed

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

package/src/versions/three/examples/subpath/src/routes/foo.svelte ADDED Viewed

	@@ -0,0 +1 @@
1	+ <h1>foo</h1>

package/src/versions/three/examples/subpath/src/routes/index.svelte ADDED Viewed

@@ -0,0 +1,7 @@
+<script>
+    import { url } from '@roxi/routify'
+</script>
+<h1>Subpath Example</h1>
+<a href={$url('../foo')}>{$url('../foo')}</a>

package/src/versions/three/examples/subpath/vite.config.js ADDED Viewed

@@ -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/sveltekit/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "@example/sveltekit",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview"
+  },
+  "dependencies": {
+    "@roxi/routify": "^3.0.0-next.1"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "next",
+    "svelte": "^3.34.0"
+  },
+  "type": "module",
+  "routify": {
+    "routesDir": "src/pages"
+  }
+}

package/src/versions/three/examples/sveltekit/src/app.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

package/src/versions/three/examples/sveltekit/src/global.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="@sveltejs/kit" />

package/src/versions/three/examples/sveltekit/src/pages/a/page.svelte ADDED Viewed

	@@ -0,0 +1 @@
1	+ <h3>a page</h3>

package/src/versions/three/examples/sveltekit/src/pages/index.svelte ADDED Viewed

@@ -0,0 +1,6 @@
+<script>
+    import { url } from '@roxi/routify'
+</script>
+<h1>Welcome to SvelteKit + Routify</h1>
+<a href={$url('../a/page')}>a page</a>

package/src/versions/three/examples/sveltekit/src/routes/[...index].svelte ADDED Viewed

@@ -0,0 +1,11 @@
+<script context="module">
+    import { Router, createRouter } from '@roxi/routify'
+    import routes from '../../.routify/routes.default.js'
+    const router = createRouter({ routes })
+    // for SSR we need to tell Sveltekit to wait for Routify to finish loading its components
+    export const load = ({ page }) => router.url.replace(page.path)
+</script>
+<Router {router} />

package/src/versions/three/examples/sveltekit/static/favicon.png ADDED Viewed

Binary file

package/src/versions/three/examples/sveltekit/svelte.config.js ADDED Viewed

@@ -0,0 +1,20 @@
+import routify from '@roxi/routify/vite-plugin'
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {
+        // hydrate the <div id="svelte"> element in src/app.html
+        target: '#svelte',
+        vite: {
+            plugins: [routify()],
+            resolve: {
+                dedupe: ['svelte'],
+            },
+        },
+        router: false
+    }
+};
+export default config

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

@@ -0,0 +1,81 @@
+import { onCancel } from '../../utils/prompts.js';
+import { readdir, cp } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import prompts from 'prompts';
+import k from 'kleur';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function text() {
+    console.log();
+    console.log(
+        k.red(`  ! R3 is under heavy work, expect bugs and missing features`),
+    );
+    console.log();
+    console.log(
+        `  ${k.underline(`${k.bold().magenta('Routify')} ${k.bold('3')}`)}`,
+    );
+    console.log(
+        `  - Follow our twitter to get updates: ${k.blue(
+            'https://twitter.com/routifyjs',
+        )}`,
+    );
+    console.log(
+        `  - Or join our discord: ${k.blue(
+            'https://discord.com/invite/ntKJD5B',
+        )}`,
+    );
+    console.log();
+}
+async function getExampleDir() {
+    const projects = await readdir(join(__dirname, './examples'));
+    const { project } = await prompts(
+        {
+            message: 'Please select a example project',
+            name: 'project',
+            type: 'select',
+            choices: projects.map((value) => ({ title: value, value })),
+        },
+        { onCancel },
+    );
+    return `./examples/${project}`;
+}
+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(),
+        '/',
+    );
+    await cp(exampleDir, projectDir, { recursive: true });
+};

package/src/versions/three/skeleton/index.html ADDED Viewed

@@ -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/skeleton/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+    "name": "starter",
+    "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/skeleton/src/App.svelte ADDED Viewed

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