roxiness · CerealKiller97 · Feb 14, 2023 · Feb 15, 2023 · Feb 15, 2023 · Feb 15, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/bin.js b/src/bin.js
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import updateNotifier from 'update-notifier';
 import { readFile } from 'fs/promises';
-import { run } from '../src/index.js';
 import minimist from 'minimist';
+import updateNotifier from 'update-notifier';
+import { run } from '../src/index.js';
 
 const args = minimist(process.argv.slice(2));
 

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,10 @@
-import { onCancel } from './utils/prompts.js';
 import { existsSync, readdirSync } from 'fs';
 import { mkdir } from 'fs/promises';
+import k from 'kleur';
 import symbols from 'log-symbols';
-import { relative } from 'path';
-import { resolve } from 'path';
+import { relative, resolve } from 'path';
 import prompts from 'prompts';
-import k from 'kleur';
+import { onCancel } from './utils/prompts.js';
 
 const versions = {
     2: () => import('./versions/two.js'),

diff --git a/src/versions/three/examples/typescript-tailwind-cypress/cypress.config.ts b/src/versions/three/examples/typescript-tailwind-cypress/cypress.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+    },
+});
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/cypress/e2e/spec.cy.ts b/src/versions/three/examples/typescript-tailwind-cypress/cypress/e2e/spec.cy.ts
@@ -0,0 +1,7 @@
+describe('[Home] template spec', () => {
+    it('passes', () => {
+        cy.visit('http://localhost:1337/');
+
+        cy.get('h1').should('have.text', 'Routify 3');
+    });
+});
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/cypress/fixtures/example.json b/src/versions/three/examples/typescript-tailwind-cypress/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/cypress/support/commands.ts b/src/versions/three/examples/typescript-tailwind-cypress/cypress/support/commands.ts
@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/cypress/support/e2e.ts b/src/versions/three/examples/typescript-tailwind-cypress/cypress/support/e2e.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/index.html b/src/versions/three/examples/typescript-tailwind-cypress/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>Svelte app</title>
+
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+        <script type="module" src="/src/main.ts"></script>
+    </head>
+
+    <body class="debug-screens"></body>
+</html>
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/package.json b/src/versions/three/examples/typescript-tailwind-cypress/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "starter",
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "preview": "vite preview",
+        "dev": "vite",
+        "svelte-check": "svelte-check",
+        "cypress:open": "cypress open",
+        "cypress:test": "cypress run"
+    },
+    "devDependencies": {
+        "cypress": "^12.5.1",
+        "@roxi/routify": "3.0.0-next.142",
+        "autoprefixer": "^10.4.13",
+        "tailwindcss": "^3.2.6",
+        "tailwindcss-debug-screens": "^2.2.1",
+        "postcss": "^8.4.21",
+        "@sveltejs/vite-plugin-svelte": "^2.0.0",
+        "@tsconfig/svelte": "^3.0.0",
+        "svelte": "^3.55.1",
+        "svelte-preprocess": "^5.0.1",
+        "typescript": "^4.9.5",
+        "vite": "^4.0.0",
+        "svelte-check": "^3.0.3"
+    }
+}
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/postcss.config.cjs b/src/versions/three/examples/typescript-tailwind-cypress/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/public/favicon.ico b/src/versions/three/examples/typescript-tailwind-cypress/public/favicon.ico
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/src/App.svelte b/src/versions/three/examples/typescript-tailwind-cypress/src/App.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Router } from '@roxi/routify';
+    import routes from '../.routify/routes.default.js';
+    import './app.css';
+</script>
+
+<Router {routes} />
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/src/app.css b/src/versions/three/examples/typescript-tailwind-cypress/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/src/main.ts b/src/versions/three/examples/typescript-tailwind-cypress/src/main.ts
@@ -0,0 +1,5 @@
+import App from './App.svelte'
+
+const app = new App({ target: document.body })
+
+export default app
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/src/routes/index.svelte b/src/versions/three/examples/typescript-tailwind-cypress/src/routes/index.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    let name = 'Routify 3';
+</script>
+
+<div class="container mx-auto p-10">
+    <h1 class="text-center text-4xl">{name}</h1>
+</div>
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/tailwind.config.cjs b/src/versions/three/examples/typescript-tailwind-cypress/tailwind.config.cjs
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'class',
+    content: ['./src/**/*.svelte', './src/**/*.css', './index.html'],
+    theme: {
+        extend: {},
+    },
+    plugins: [require('tailwindcss-debug-screens')],
+};
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/tsconfig.json b/src/versions/three/examples/typescript-tailwind-cypress/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+        "target": "esnext",
+        "useDefineForClassFields": true,
+        "module": "esnext",
+        "resolveJsonModule": true,
+        "baseUrl": ".",
+        "allowJs": true,
+        "checkJs": true
+    },
+    "include": [
+        "src//.d.ts",
+        "src/**/.ts",
+        "src//*.js",
+        "src//.svelte",
+        "src/main.ts",
+        "src/main.ts"
+    ]
+}
diff --git a/src/versions/three/examples/typescript-tailwind-cypress/vite.config.js b/src/versions/three/examples/typescript-tailwind-cypress/vite.config.js
@@ -0,0 +1,26 @@
+import routify from '@roxi/routify/vite-plugin';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
+import { defineConfig } from 'vite';
+
+const production = process.env.NODE_ENV === 'production';
+
+export default defineConfig({
+    clearScreen: false,
+
+    plugins: [
+        routify({
+            ssr: { enable: false },
+        }),
+        svelte({
+            compilerOptions: {
+                dev: !production,
+                hydratable: !!process.env.ROUTIFY_SSR_ENABLE,
+            },
+            extensions: ['.svelte'],
+            preprocess: [preprocess()],
+        }),
+    ],
+
+    server: { port: 1337 },
+});
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/index.html b/src/versions/three/examples/typescript-tailwind-playwright/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>Svelte app</title>
+
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+        <script type="module" src="/src/main.ts"></script>
+    </head>
+
+    <body class="debug-screens"></body>
+</html>
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/package.json b/src/versions/three/examples/typescript-tailwind-playwright/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "starter",
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "preview": "vite preview",
+        "dev": "vite",
+        "svelte-check": "svelte-check",
+        "test": "playwright test"
+    },
+    "devDependencies": {
+        "@playwright/test": "^1.30.0",
+        "@roxi/routify": "3.0.0-next.142",
+        "autoprefixer": "^10.4.13",
+        "tailwindcss": "^3.2.6",
+        "tailwindcss-debug-screens": "^2.2.1",
+        "postcss": "^8.4.21",
+        "@sveltejs/vite-plugin-svelte": "^2.0.0",
+        "@tsconfig/svelte": "^3.0.0",
+        "svelte": "^3.55.1",
+        "svelte-preprocess": "^5.0.1",
+        "typescript": "^4.9.5",
+        "vite": "^4.0.0",
+        "svelte-check": "^3.0.3"
+    }
+}
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/playwright.config.ts b/src/versions/three/examples/typescript-tailwind-playwright/playwright.config.ts
@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+    webServer: {
+        command: 'npm run build && npm run preview',
+        port: 4173,
+    },
+    reporter: 'list',
+    testDir: 'tests',
+};
+
+export default config;
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/postcss.config.cjs b/src/versions/three/examples/typescript-tailwind-playwright/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/public/favicon.ico b/src/versions/three/examples/typescript-tailwind-playwright/public/favicon.ico
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/src/App.svelte b/src/versions/three/examples/typescript-tailwind-playwright/src/App.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Router } from '@roxi/routify';
+    import routes from '../.routify/routes.default.js';
+    import './app.css';
+</script>
+
+<Router {routes} />
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/src/app.css b/src/versions/three/examples/typescript-tailwind-playwright/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/src/main.ts b/src/versions/three/examples/typescript-tailwind-playwright/src/main.ts
@@ -0,0 +1,5 @@
+import App from './App.svelte'
+
+const app = new App({ target: document.body })
+
+export default app
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/src/routes/index.svelte b/src/versions/three/examples/typescript-tailwind-playwright/src/routes/index.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    let name = 'Routify 3';
+</script>
+
+<div class="container mx-auto p-10">
+    <h1 class="text-center text-4xl">{name}</h1>
+</div>
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/tailwind.config.cjs b/src/versions/three/examples/typescript-tailwind-playwright/tailwind.config.cjs
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'class',
+    content: ['./src/**/*.svelte', './src/**/*.css', './index.html'],
+    theme: {
+        extend: {},
+    },
+    plugins: [require('tailwindcss-debug-screens')],
+};
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/tests/home.spec.ts b/src/versions/three/examples/typescript-tailwind-playwright/tests/home.spec.ts
@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+    await page.goto('/');
+
+    expect(await page.textContent('h1')).toBe('Routify 3');
+});
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/tsconfig.json b/src/versions/three/examples/typescript-tailwind-playwright/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+        "target": "esnext",
+        "useDefineForClassFields": true,
+        "module": "esnext",
+        "resolveJsonModule": true,
+        "baseUrl": ".",
+        "allowJs": true,
+        "checkJs": true
+    },
+    "include": [
+        "src//.d.ts",
+        "src/**/.ts",
+        "src//*.js",
+        "src//.svelte",
+        "src/main.ts",
+        "src/main.ts"
+    ]
+}
diff --git a/src/versions/three/examples/typescript-tailwind-playwright/vite.config.js b/src/versions/three/examples/typescript-tailwind-playwright/vite.config.js
@@ -0,0 +1,26 @@
+import routify from '@roxi/routify/vite-plugin';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
+import { defineConfig } from 'vite';
+
+const production = process.env.NODE_ENV === 'production';
+
+export default defineConfig({
+    clearScreen: false,
+
+    plugins: [
+        routify({
+            ssr: { enable: false },
+        }),
+        svelte({
+            compilerOptions: {
+                dev: !production,
+                hydratable: !!process.env.ROUTIFY_SSR_ENABLE,
+            },
+            extensions: ['.svelte'],
+            preprocess: [preprocess()],
+        }),
+    ],
+
+    server: { port: 1337 },
+});