fix: update to match latest svelte-kit

closes #50, #51
svelteness · Jul 13, 2022 · 22d6a83 · 22d6a83
1 parent e4b20bc
commit 22d6a83
Show file tree

Hide file tree

Showing 19 changed files with 1,172 additions and 803 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -2,27 +2,28 @@
   "name": "demo",
   "type": "module",
   "scripts": {
-    "dev": "svelte-kit dev -p 3002",
-    "build": "pnpm sync && svelte-kit build",
+    "dev": "vite dev --port 3002",
+    "build": "pnpm sync && vite build",
     "package": "svelte-kit package",
-    "preview": "svelte-kit preview -p 3002",
+    "preview": "vite preview --port 3002",
     "sync": "svelte-kit sync",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@iconify-json/ri": "^1.1.1",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/adapter-static": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-auto": "1.0.0-next.57",
+    "@sveltejs/adapter-static": "1.0.0-next.35",
+    "@sveltejs/kit": "1.0.0-next.370",
     "@svelteness/kit-docs": "workspace:*",
     "shiki": "^0.10.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
     "tslib": "^2.3.1",
     "typescript": "~4.6.2",
-    "unplugin-icons": "^0.13.4"
+    "unplugin-icons": "^0.13.4",
+    "vite": "^2.9.14"
   },
   "dependencies": {
     "clsx": "^1.1.1"

diff --git a/demo/src/app.html b/demo/src/app.html
@@ -19,9 +19,9 @@
       }
     </script>
 
-    %svelte.head%
+    %sveltekit.head%
   </head>
   <body>
-    <div>%svelte.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/demo/svelte.config.js b/demo/svelte.config.js
@@ -1,6 +1,4 @@
 import adapter from '@sveltejs/adapter-static';
-import { kitDocsPlugin } from '@svelteness/kit-docs/node';
-import Icons from 'unplugin-icons/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -13,10 +11,6 @@ const config = {
       default: true,
       entries: ['*'],
     },
-
-    vite: {
-      plugins: [Icons({ compiler: 'svelte' }), kitDocsPlugin()],
-    },
   },
 };
 

diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -1,3 +1,13 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json"
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
 }
diff --git a/demo/vite.config.js b/demo/vite.config.js
@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import icons from 'unplugin-icons/vite';
+import kitDocs from '@svelteness/kit-docs/node';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [icons({ compiler: 'svelte' }), kitDocs(), sveltekit()],
+};
+
+export default config;
diff --git a/packages/create-kit-docs/bin/create-kit-docs.js b/packages/create-kit-docs/bin/create-kit-docs.js
@@ -37,7 +37,7 @@ async function main() {
     console.log(`\n[kit-docs]: target directory is empty, creating new SvelteKit app.\n`);
 
     try {
-      const child = spawn('npm', ['init', 'svelte@next', rootDirName ?? '.'], {
+      const child = spawn('npm', ['create', 'svelte', rootDirName ?? '.'], {
         stdio: 'inherit',
         shell: true,
       });
@@ -63,7 +63,7 @@ async function main() {
   }
 
   /** @type {RegExp[]} */
-  let overwrite = [/svelte\.config\.js/, /src\/routes\//];
+  let overwrite = [/svelte\.config\.js/, /vite\.config\.js/, /src\/routes\//];
 
   if (!isTargetDirEmpty) {
     /** @type {{ ok: boolean }} */
@@ -74,6 +74,14 @@ async function main() {
       initial: false,
     });
 
+    /** @type {{ ok: boolean }} */
+    const { ok: viteConfig } = await enquirer.prompt({
+      type: 'confirm',
+      name: 'ok',
+      message: `Overwrite \`vite.config.js\`?`,
+      initial: false,
+    });
+
     /** @type {{ ok: boolean }} */
     const { ok: routes } = await enquirer.prompt({
       type: 'confirm',
@@ -83,7 +91,11 @@ async function main() {
     });
 
     overwrite = /** @type {RegExp[]} */ (
-      [svelteConfig && /svelte\.config\.js/, routes && /src\/routes\//].filter(Boolean)
+      [
+        svelteConfig && /svelte\.config\.js/,
+        viteConfig && /vite\.config\.js/,
+        routes && /src\/routes\//,
+      ].filter(Boolean)
     );
   }
 
@@ -92,13 +104,13 @@ async function main() {
 
   const deps = {
     '@iconify-json/ri': '^1.1.1',
-    '@sveltejs/adapter-auto': 'next',
-    '@sveltejs/kit': 'next',
+    '@sveltejs/adapter-auto': '^1.0.0-next.57',
+    '@sveltejs/kit': '^1.0.0-next.370',
     '@svelteness/kit-docs': `^${version}`,
-    clsx: '^1.1.1',
-    'unplugin-icons': '^0.13.4',
-    shiki: '^0.10.1',
-    svelte: '^3.44.0',
+    clsx: '^1.1.0',
+    'unplugin-icons': '^0.13.0',
+    shiki: '^0.10.0',
+    svelte: '^3.49.0',
   };
 
   if (!pkg.devDependencies) {
@@ -161,7 +173,7 @@ async function main() {
     if (!/svelteness::color-scheme/.test(fileContent)) {
       fs.writeFileSync(
         appHTMLPath,
-        fileContent.replace(/%svelte.head%/, `${colorSchemeScript}\n    %svelte.head%`),
+        fileContent.replace(/%sveltekit.head%/, `${colorSchemeScript}\n    %sveltekit.head%`),
       );
     }
   }

diff --git a/packages/create-kit-docs/template-base/svelte.config.js b/packages/create-kit-docs/template-base/svelte.config.js
@@ -1,6 +1,4 @@
 import adapter from '@sveltejs/adapter-auto';
-import { kitDocsPlugin } from '@svelteness/kit-docs/node';
-import Icons from 'unplugin-icons/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -13,17 +11,6 @@ const config = {
       default: true,
       entries: ['*'],
     },
-
-    vite: {
-      plugins: [
-        Icons({ compiler: 'svelte' }),
-        kitDocsPlugin({
-          shiki: {
-            theme: 'material-ocean',
-          },
-        }),
-      ],
-    },
   },
 };
 

diff --git a/packages/create-kit-docs/template-base/vite.config.js b/packages/create-kit-docs/template-base/vite.config.js
@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import icons from 'unplugin-icons/vite';
+import kitDocs from '@svelteness/kit-docs/node';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [icons({ compiler: 'svelte' }), kitDocs(), sveltekit()],
+};
+
+export default config;
diff --git a/packages/kit-docs/package.json b/packages/kit-docs/package.json
@@ -40,10 +40,10 @@
     "build": "run-s build:node kit:sync build:node:types build:client build:styles",
     "build:client": "svelte-kit package && run-s build:client:types clean:client",
     "build:client:types": "api-extractor run && rimraf temp client/**/*.d.ts",
-    "build:node": "pnpm build:node:ext -- --entry=src/node/index.ts --outdir=node --platform=node --bundle --requireshim",
+    "build:node": "pnpm build:node:ext --entry=src/node/index.ts --outdir=node --platform=node --bundle --requireshim",
     "build:node:ext": "node ../../.scripts/build.js --external=vite,@sveltejs,shiki",
     "build:node:types": "tsc -p src/node && api-extractor run -c api-extractor.node.json && rimraf node-types",
-    "build:node:watch": "pnpm build:node -- -w",
+    "build:node:watch": "pnpm build:node -w",
     "build:styles": "run-s build:styles:theme build:styles:docsearch",
     "build:styles:theme": "npx tailwindcss -c ./tailwind.config.cjs -i ./src/lib/styles/theme.css -o ./client/styles/theme.css",
     "build:styles:docsearch": "npx tailwindcss -c ./tailwind.config.cjs -i ./src/lib/styles/docsearch.css -o ./client/styles/docsearch.css",
@@ -52,8 +52,8 @@
     "dev": "pnpm build:node && run-p \"kit:dev\" \"build:node -- -w\"",
     "lint:eslint": "eslint src --fix",
     "lint:prettier": "prettier src --write --loglevel warn",
-    "kit:dev": "svelte-kit dev -p 3001 --host",
-    "kit:build": "run-s build:node kit:sync && svelte-kit build",
+    "kit:dev": "vite dev --port 3001 --host",
+    "kit:build": "run-s build:node kit:sync && vite build",
     "kit:preview": "sirv build -p 3001",
     "kit:sync": "svelte-kit sync"
   },
@@ -72,9 +72,10 @@
     "@iconify-json/ri": "^1.1.1",
     "@microsoft/api-extractor": "^7.20.0",
     "@rollup/pluginutils": "^4.2.0",
-    "@sveltejs/adapter-auto": "^1.0.0-next.30",
-    "@sveltejs/adapter-static": "^1.0.0-next.29",
-    "@sveltejs/kit": "^1.0.0-next.288",
+    "@sveltejs/adapter-auto": "1.0.0-next.57",
+    "@sveltejs/adapter-static": "1.0.0-next.35",
+    "@sveltejs/kit": "1.0.0-next.370",
+    "@svelteness/kit-docs": "link:.",
     "@tailwindcss/typography": "^0.5.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.14",
@@ -102,7 +103,7 @@
     "tslib": "^2.3.0",
     "typescript": "^4.5.4",
     "unplugin-icons": "^0.13.4",
-    "vite": "^2.8.6"
+    "vite": "^2.9.14"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/kit-docs/src/app.html b/packages/kit-docs/src/app.html
@@ -6,7 +6,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="%svelte.assets%/manifest.json" />
+    <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -23,9 +23,9 @@
       }
     </script>
 
-    %svelte.head%
+    %sveltekit.head%
   </head>
   <body>
-    <div>%svelte.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/packages/kit-docs/src/node/index.ts b/packages/kit-docs/src/node/index.ts
@@ -4,3 +4,4 @@ export * from './kit-docs-plugin';
 export * from './markdown-plugin';
 export * from './markdown-plugin/parser';
 export { kebabToTitleCase } from './utils/string';
+export { kitDocsPlugin as default } from './kit-docs-plugin';
diff --git a/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart.md b/packages/kit-docs/src/routes/docs/[...1]getting-started/[...2]quickstart.md
@@ -35,7 +35,7 @@ you'd like a reference to use as you follow along with the steps below.
 !!!step title="Create SvelteKit App"|description="Create a new SvelteKit application from your terminal (skip this step if you have one). Pick the Skeleton option template."
 
 ```bash copySteps
-npm init svelte@next mydocs
+npm create svelte mydocs
 cd mydocs
 npm i
 ```
@@ -50,30 +50,17 @@ npm i @svelteness/kit-docs @iconify-json/ri unplugin-icons clsx shiki -D
 
 !!!
 
-!!!step title="Update Svelte Config"|(slot=description)=Add the following highlighted lines to your `svelte.config.js` file or copy the entire config.
+!!!step title="Update Svelte Config"|(slot=description)=Add the `.md` file extension to be processed by Svelte.
 
-```js title=svelte.config.js{2-3,7,14-19}|copy
+```js title=svelte.config.js{5}|copy
 import adapter from '@sveltejs/adapter-auto';
-import { kitDocsPlugin } from '@svelteness/kit-docs/node';
-import Icons from 'unplugin-icons/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   extensions: ['.svelte', '.md'],
 
   kit: {
     adapter: adapter(),
-
-    vite: {
-      plugins: [
-        Icons({ compiler: 'svelte' }),
-        kitDocsPlugin({
-          shiki: {
-            theme: 'material-ocean',
-          },
-        }),
-      ],
-    },
   },
 };
 
@@ -82,6 +69,23 @@ export default config;
 
 !!!
 
+!!!step title="Update Vite Config"|(slot=description)=Update your `vite.config.js` file to match.
+
+```js title=vite.config.js|copy
+import { sveltekit } from '@sveltejs/kit/vite';
+import icons from 'unplugin-icons/vite';
+import kitDocs from '@svelteness/kit-docs/node';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [icons({ compiler: 'svelte' }), kitDocs(), sveltekit()],
+};
+
+export default config;
+```
+
+!!!
+
 !!!step title="Add Global Types"|(slot=description)=Add the global TypeScript types to your `app.d.ts` file.
 
 ```ts title=src/app.d.ts|copyHighlight{2}

diff --git a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...2]configuration.md b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...2]configuration.md
@@ -50,18 +50,13 @@ rm -rf src/fonts
 By default, the fonts directory is set to `src/fonts`. You can change the location by setting
 a new alias like so:
 
-```js title=svelte.config.js|copyHighlight{9}
+```js title=vite.config.js|copySteps{1,6}
 import { resolve } from 'path';
 
 export default {
-  kit: {
-    // ...
-    vite: {
-      resolve: {
-        alias: {
-          $fonts: resolve(process.cwd(), 'src/fonts'),
-        },
-      },
+  resolve: {
+    alias: {
+      $fonts: resolve(process.cwd(), 'src/fonts'),
     },
   },
 };

diff --git a/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions.md b/packages/kit-docs/src/routes/docs/[...3]markdown/[...2]extensions.md
@@ -285,13 +285,13 @@ const bar = 1;
 
 ````md
 ```bash
-npm init svelte@next docs
+npm create svelte docs
 cd docs
 ```
 ````
 
 ```bash
-npm init svelte@next docs
+npm create svelte docs
 cd docs
 ```
 
@@ -381,14 +381,14 @@ copy button it'll move to the next line.
 
 ````md
 ```bash copySteps
-npm init svelte@next docs
+npm create svelte docs
 cd docs
 npm i
 ```
 ````
 
 ```bash copySteps
-npm init svelte@next docs
+npm create svelte docs
 cd docs
 npm i
 ```