feat: now Solid has add-ons

Author: jherr

templates/react/add-on/react-query/assets/src/routes/demo.react-query.tsx renamed to templates/react/add-on/tanstack-query/assets/src/routes/demo.tanstack-query.tsx

@@ -1,5 +1,5 @@
 {
-  "name": "React Query",
+  "name": "TanStack Query",
   "description": "Integrate TanStack Query into your application.",
   "phase": "add-on",
   "link": "https://tanstack.com/query/latest",
@@ -23,8 +23,8 @@
   },
   "routes": [
     {
-      "url": "/demo/react-query",
-      "name": "React Query"
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query"
     }
   ]
 }

templates/react/add-on/react-query/info.json renamed to templates/react/add-on/tanstack-query/info.json

@@ -0,0 +1,5 @@
+import { Store } from '@tanstack/store'
+
+export const store = new Store({
+  count: 0,
+})

templates/react/add-on/react-query/package.json renamed to templates/react/add-on/tanstack-query/package.json

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { useStore } from '@tanstack/solid-store'
+
+import { store } from '../lib/demo-store'
+
+export const Route = createFileRoute('/demo/store/page1')({
+  component: App,
+})
+
+function App() {
+  const count = useStore(store, (state) => state.count)
+
+  return (
+    <div class="p-4 flex flex-col gap-2">
+      <p class="text-2xl">Global Count: {count}</p>
+      <button
+        onClick={() => {
+          store.setState((state) => ({
+            count: state.count + 1,
+          }))
+        }}
+        class="mt-4 inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Increment count
+      </button>
+    </div>
+  )
+}
+
+export default App

templates/solid/add-on/store/assets/src/lib/demo-store.ts

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { useStore } from '@tanstack/solid-store'
+
+import { store } from '../lib/demo-store'
+
+export const Route = createFileRoute('/demo/store/page2')({
+  component: App,
+})
+
+function App() {
+  const count = useStore(store, (state) => state.count)
+
+  return (
+    <div class="p-4 flex flex-col gap-2">
+      <p class="text-2xl">Global Count: {count}</p>
+      <button
+        onClick={() => {
+          store.setState((state) => ({
+            count: state.count + 10,
+          }))
+        }}
+        class="mt-4 inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Increment count by 10
+      </button>
+    </div>
+  )
+}
+
+export default App

templates/solid/add-on/store/assets/src/routes/demo.store.page1.tsx

@@ -0,0 +1,16 @@
+{
+  "name": "Store",
+  "description": "Add TanStack Store to your application.",
+  "phase": "add-on",
+  "link": "https://tanstack.com/store/latest",
+  "routes": [
+    {
+      "url": "/demo/store/page1",
+      "name": "Store Pg 1"
+    },
+    {
+      "url": "/demo/store/page2",
+      "name": "Store Pg 2"
+    }
+  ]
+}

templates/solid/add-on/store/assets/src/routes/demo.store.page2.tsx

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/store": "^0.7.0",
+    "@tanstack/solid-store": "^0.7.0"
+  }
+}

templates/solid/add-on/store/info.json

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: App,
+})
+
+function App() {
+  const peopleQuery = createQuery(() => ({
+    queryKey: ['people'],
+    queryFn: () =>
+      fetch('https://swapi.dev/api/people')
+        .then((res) => res.json())
+        .then((data) => data.results as Array<{ name: string }>),
+    initialData: [],
+  }))
+
+  return (
+    <div class="p-4">
+      <h1 class="text-2xl mb-4">People list from Swapi</h1>
+      <ul>
+        {peopleQuery.data.map((person) => (
+          <li>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default App

templates/solid/add-on/store/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "TanStack Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "link": "https://tanstack.com/query/latest",
+  "main": {
+    "imports": [
+      "import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'"
+    ],
+    "initialize": ["const queryClient = new QueryClient()"],
+    "providers": [
+      {
+        "open": "<QueryClientProvider client={queryClient}>",
+        "close": "</QueryClientProvider>"
+      }
+    ]
+  },
+  "layout": {
+    "imports": [
+      "import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'"
+    ],
+    "jsx": "<SolidQueryDevtools buttonPosition='bottom-right' />"
+  },
+  "routes": [
+    {
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query"
+    }
+  ]
+}