Update to latest SvelteKit decisions

Author: zerodevx

index.mjs

@@ -1,6 +1,15 @@
 #!/usr/bin/env zx
+/* global $, fs, path, argv, echo, spinner */
 
-$.verbose = false
+const name = argv._[0]
+if (!name) {
+  echo`Error: please specify the app name`
+  process.exit(1)
+}
+
+function p(...args) {
+  return path.join(name, ...args)
+}
 
 async function patchFiles(files, ...replacers) {
   for (const file of [files].flat()) {
@@ -12,9 +21,9 @@ async function patchFiles(files, ...replacers) {
   }
 }
 
-async function patchPackage(name, ...dependencies) {
+async function patchPackage(...dependencies) {
   const version = async (dep) => (await $`npm show ${dep} version`).stdout.trim()
-  const file = path.join(name, 'package.json')
+  const file = p('package.json')
   let pkg = await fs.readJson(file)
   for (const dep of dependencies) {
     pkg.devDependencies[dep.slice(1)] =
@@ -23,31 +32,83 @@ async function patchPackage(name, ...dependencies) {
   await fs.writeJson(file, pkg, { spaces: 2 })
 }
 
-const name = argv._[0]
-if (!name) {
-  echo`Error: please specify the app name`
-  process.exit(1)
-}
-
 await spinner('replace favicon', async () => {
-  await fetch('https://raw.githubusercontent.com/zerodevx/sveltekit-starter/main/favicon.png').then(
-    (r) => r.body.pipe(fs.createWriteStream(path.join(name, 'static', 'favicon.png')))
-  )
+  const req = await fetch('https://cdn.jsdelivr.net/gh/zerodevx/sveltekit-starter/favicon.png')
+  const blob = await req.blob()
+  const buf = await blob.arrayBuffer()
+  await fs.writeFile(p('static', 'favicon.png'), Buffer.from(buf))
 })
 
-await spinner('add tailwindcss', async () => {
-  await $`cd ${name} && npx -y svelte-add@latest tailwindcss`
-  await patchPackage(name, '+@tailwindcss/typography')
-  await patchFiles(path.join(name, 'tailwind.config.cjs'), [
-    `plugins: [`,
-    `plugins: [require('@tailwindcss/typography'),`
+await spinner('add tailwindcss, iconify and fontsource', async () => {
+  await patchPackage(
+    '+tailwindcss',
+    '+@tailwindcss/typography',
+    '+@fontsource-variable/inter',
+    '+@iconify/tailwind',
+    '+@iconify-json/mdi',
+    '+prettier-plugin-tailwindcss'
+  )
+  await fs.writeFile(
+    p('tailwind.config.js'),
+    `import { addIconSelectors } from '@iconify/tailwind'
+import typography from '@tailwindcss/typography'
+import dt from 'tailwindcss/defaultTheme'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter Variable', ...dt.fontFamily.sans]
+      }
+    }
+  },
+  plugins: [addIconSelectors(['mdi']), typography]
+}`
+  )
+  await fs.writeFile(
+    p('postcss.config.js'),
+    `/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}`
+  )
+  await fs.writeFile(
+    p('src', 'app.pcss'),
+    `/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+  )
+  await fs.writeFile(
+    p('src', 'routes', '+layout.svelte'),
+    `<script>
+import '@fontsource-variable/inter'
+import '../app.pcss'
+</script>
+
+<slot />`
+  )
+  await patchFiles(p('src', 'routes', '+page.svelte'), [
+    `</h1>`,
+    `</h1>\n<span class="iconify mdi--heart text-red-600 animate-pulse" />\n`
   ])
+  await patchFiles(
+    p('svelte.config.js'),
+    [`import`, `import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\nimport`],
+    [`\n};`, `, preprocess: [vitePreprocess()]\n};`]
+  )
 })
 
 await spinner('patch prettier', async () => {
-  const file = path.join(name, '.prettierrc')
-  await fs.writeJson(file, {
-    ...(await fs.readJson(file)),
+  let config = await fs.readJson(p('.prettierrc'))
+  config.plugins = [...config.plugins, 'prettier-plugin-tailwindcss']
+  await fs.writeJson(p('.prettierrc'), {
+    ...config,
     printWidth: 100,
     useTabs: false,
     semi: false,
@@ -60,24 +121,21 @@ await spinner('patch prettier', async () => {
 })
 
 await spinner('patch eslint', async () => {
-  await patchFiles(path.join(name, '.eslintrc.cjs'), [
-    `}\n};`,
-    `},\n\trules: { 'no-tabs': 'error', 'no-unexpected-multiline': 'error' }\n};`
+  await patchFiles(p('eslint.config.js'), [
+    `languageOptions`,
+    `rules: { 'no-tabs': 'error', 'no-unexpected-multiline': 'error' }, languageOptions`
   ])
 })
 
 await spinner('add adapter-static', async () => {
-  await patchFiles(path.join(name, 'svelte.config.js'), [`adapter-auto`, `adapter-static`])
+  await patchFiles(p('svelte.config.js'), [`adapter-auto`, `adapter-static`])
   await patchPackage(name, '-@sveltejs/adapter-auto', '+@sveltejs/adapter-static')
-  await fs.outputFile(
-    path.join(name, 'src', 'routes', '+layout.js'),
-    `export const prerender = true\n`
-  )
+  await fs.writeFile(p('src', 'routes', '+layout.js'), `export const prerender = true\n`)
 })
 
 await spinner('add versioning', async () => {
   await patchFiles(
-    path.join(name, 'svelte.config.js'),
+    p('svelte.config.js'),
     [
       `static';`,
       `static';\nimport { readFileSync } from 'node:fs'\n\nconst { version: name } = JSON.parse(readFileSync(new URL('package.json', import.meta.url), 'utf8'))\n`
@@ -86,32 +144,6 @@ await spinner('add versioning', async () => {
   )
 })
 
-await spinner('add fontsource', async () => {
-  await patchPackage(name, '+@fontsource-variable/inter')
-  await patchFiles(path.join(name, 'src', 'routes', '+layout.svelte'), [
-    `<script>`,
-    `<script>import '@fontsource-variable/inter';`
-  ])
-  await patchFiles(
-    path.join(name, 'tailwind.config.cjs'),
-    [`/**`, `const dt = require('tailwindcss/defaultTheme');\n\n/**`],
-    [`extend: {}`, `extend: { fontFamily: { sans: ['Inter Variable', ...dt.fontFamily.sans] } }`]
-  )
-})
-
-await spinner('add iconify', async () => {
-  await patchPackage(name, '+@iconify/tailwind', '+@iconify-json/mdi')
-  await patchFiles(
-    path.join(name, 'tailwind.config.cjs'),
-    [`const dt`, `const { addDynamicIconSelectors } = require('@iconify/tailwind');\nconst dt`],
-    [`plugins: [`, `plugins: [addDynamicIconSelectors({ scale: 0 }),`]
-  )
-  await patchFiles(path.join(name, 'src', 'routes', '+page.svelte'), [
-    `</h1>`,
-    `</h1>\n<span class="icon-[mdi--heart] w-8 h-8 text-red-600 animate-pulse" />\n`
-  ])
-})
-
 echo`
 All done! Complete the setup with: