fix(playground): resolve 404 routes to home

Author: codebender828

package.json

@@ -14,8 +14,8 @@
 
     "scaffold": "hygen",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
-    "playground": "yarn playground:routes && vite serve playground",
-    "playground:build": "yarn build && yarn playground:routes && vite build playground",
+    "playground": "yarn playground:routes && NODE_ENV=development vite serve playground",
+    "playground:build": "yarn build && yarn playground:routes && NODE_ENV=production vite build playground",
 
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-box": "yarn workspace @chakra-ui/c-box",

playground/src/components/NotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  mounted() {
+    this.$router.push('/')
+  }
+})
+</script>

playground/src/router.js

@@ -19,6 +19,8 @@ function buildRoutes(routes) {
 
 const routes = buildRoutes(generatedRoutes)
 
+console.log(routes)
+
 export default createRouter({
   history: createWebHistory(),
   routes,

scripts/parse-routes.ts

@@ -71,6 +71,12 @@ const flatten = (routes: Route[], resolver: Resolver): Array<string> => {
 
 const baseRoutes = getBaseRoutes()
 
+const NotFoundRoute: Route = {
+  name: 'NotFound',
+  path: '*',
+  component: '../components/Home.vue',
+}
+
 const routes: Route[] = [
   {
     name: 'Home',
@@ -93,6 +99,9 @@ baseRoutes.map((basePath) => {
   routes.push(componentRoute)
 })
 
+// 404 Route
+routes.push(NotFoundRoute)
+
 fs.writeFileSync(
   path.join(playgroundRoot, './.generated/routes.json'),
   JSON.stringify(routes, null, 2),
@@ -129,7 +138,7 @@ fs.writeFileSync(
   `/* Package components resolver only used in development mode */
     module.exports = {\n${baseRoutes
       .map(
-        (pkg) => `  '@chakra-iu/${pkg}': '${packagesRoot}/${pkg}/src/index.ts'`
+        (pkg) => `  '@chakra-ui/${pkg}': '${packagesRoot}/${pkg}/src/index.ts'`
       )
       .join(',\n')}\n}`,
   'utf8'

vite.config.js

@@ -25,6 +25,8 @@ const ChakraPlaygroundPlugin = ({ app }) => {
 
 const __DEV__ = process.env.NODE_ENV !== 'production'
 
+console.log({ __DEV__ }, process.env.NODE_ENV)
+
 createServer({
   alias: {
     ...(!__DEV__ && { ['@chakra-ui']: path.resolve(__dirname, './packages') }),