chore: Update dependencies and configuration files

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

package.json

@@ -1,23 +1,28 @@
 {
   "name": "vite-template-solid",
+  "type": "module",
   "version": "0.0.0",
-  "description": "",
+  "license": "MIT",
   "scripts": {
-    "start": "vite",
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
-  "license": "MIT",
+  "dependencies": {
+    "solid-js": "^1.8.19"
+  },
   "devDependencies": {
-    "@unocss/preset-mini": "^0.58.9",
-    "@unocss/vite": "^0.58.9",
-    "solid-devtools": "^0.29.3",
+    "@iconify-json/logos": "^1.1.44",
+    "@unocss/core": "^0.61.9",
+    "@unocss/preset-attributify": "^0.61.9",
+    "@unocss/preset-icons": "^0.61.9",
     "typescript": "^5.5.4",
+    "unocss": "^0.61.9",
     "vite": "^5.3.5",
     "vite-plugin-solid": "^2.10.2"
   },
-  "dependencies": {
-    "solid-js": "^1.8.19"
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.mjs && npm install && npm run dev"
   }
 }

src/App.tsx

@@ -1,19 +1,69 @@
-import type { Component } from 'solid-js';
+import type { Component } from 'solid-js'
+import { createSignal } from 'solid-js'
 
 const App: Component = () => {
+  const [count, setCount] = createSignal(0)
   return (
-    <p class="text-4xl text-green-700 text-center py-20">
-      Hello{' '}
-      <a
-        class="text-pink-600 hover:font-bold hover:border-1"
-        href="https://antfu.me/posts/reimagine-atomic-css"
-        target="atomic-css"
+    <div class="text-center">
+      <header class="bg-#282c34 min-h-100vh flex flex-col items-center justify-center color-white">
+        <div class="logo" />
+        <h1 class="mt-2em animate-bounce-alt animate-duration-2s">Hello Vite + Solid!</h1>
+        <p>
+          <button
+            class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
+            type="button"
+            onClick={() => setCount(count => count + 1)}
           >
-        Atomic CSS
-      </a>
-      !
-    </p>
-  );
-};
+            count is:
+            {' '}
+            {count()}
+          </button>
 
-export default App;
+          <button
+            bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
+            text="sm white"
+            font="mono light"
+            p="y-2 x-4"
+            m="l-1em"
+            border="2 rounded blue-200"
+            type="button"
+            onClick={() => setCount(count => count + 1)}
+          >
+            count is:
+            {' '}
+            {count()}
+          </button>
+
+        </p>
+        <p>
+          Edit
+          {' '}
+          <code>App.tsx</code>
+          {' '}
+          and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            class="color-#4f88c6"
+            href="https://www.solidjs.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Solid Docs
+          </a>
+          {' | '}
+          <a
+            class="color-#4f88c6"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -1,14 +1,8 @@
-import 'uno.css';
-import { render } from 'solid-js/web';
+import { render } from 'solid-js/web'
 
-import App from './App';
+import './index.css'
+import 'virtual:uno.css'
 
-const root = document.getElementById('root');
+import App from './App'
 
-if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
-  );
-}
-
-render(() => <App />, root!);
+render(() => <App />, document.getElementById('root'))

unocss.config.ts

@@ -1,6 +1,20 @@
-import { defineConfig } from '@unocss/vite';
-import { presetMini } from '@unocss/preset-mini';
+import presetAttributify from '@unocss/preset-attributify'
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import { defineConfig } from 'unocss/vite'
 
 export default defineConfig({
-  presets: [presetMini()],
+  shortcuts: [
+    { logo: 'i-logos-solidjs-icon w-6em h-6em transform transition-800 hover:rotate-360' },
+  ],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
 });

vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 // import devtools from 'solid-devtools/vite';
-import UnocssPlugin from '@unocss/vite';
+import UnocssPlugin from 'unocss/vite';
 
 export default defineConfig({
   plugins: [