feat: vueform astro vueform ts

Author: adamberecz

src/files/vueform/astro/vueform/js/tsconfig.json

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
+})

src/files/vueform/astro/vueform/ts/astro.config.mjs

@@ -0,0 +1,5 @@
+<template>
+  <Vueform>
+    <TextElement name="hello_world" label="Hello" placeholder="World" />
+  </Vueform>
+</template>

src/files/vueform/astro/vueform/ts/src/components/TestForm.vue

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Vueform from '@vueform/vueform'
+
+export default async (app: App) => {
+  const vueformConfig = (await import('../../vueform.config')).default
+  app.use(Vueform, vueformConfig)
+}

src/files/vueform/astro/vueform/ts/src/pages/_app.ts

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+<style is:global lang="scss">
+@import './../styles/style.scss';
+</style>
+
+<Layout title="Welcome to Astro.">
+  <TestForm client:only="vue" />
+</Layout>

src/files/vueform/astro/vueform/ts/src/pages/index.astro

@@ -0,0 +1,42 @@
+@import '@vueform/vueform/themes/vueform/scss/index.scss';
+
+@media (prefers-color-scheme: dark) {
+  :root, :before, :after, * {
+    @include vf-dark-vars;
+  }
+}
+
+:root {
+  color: white;
+  
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+form {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: black;
+  }
+
+  html {
+    background: white;
+  }
+}

src/files/vueform/astro/vueform/ts/src/styles/style.scss

@@ -0,0 +1,9 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/vueform'
+import { defineConfig } from '@vueform/vueform'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+})

src/files/vueform/astro/vueform/ts/vueform.config.js

@@ -3,6 +3,7 @@
  * - test different package managers
  * - think about npm < 6
  * - get notified if any framework files change
+ * - exit properly anytime
  */
 
 import { spawn } from 'child_process'
@@ -137,12 +138,6 @@ async function main() {
       return
     }
 
-    const isTs = ['nuxt'].indexOf(framework) !== -1 || ts
-    const isBuilder = builder === 'builder'
-    const isTailwind = ['tailwind', 'tailwind-material'].indexOf(theme) !== -1
-    const isBootstrap = ['bootstrap'].indexOf(theme) !== -1
-    const isAstro = framework === 'astro'
-
     /**
      * Enter project folder
      */
@@ -155,6 +150,17 @@ async function main() {
     console.log('Running npm install...')
     await runCommand('npm', ['install'])
 
+    /**
+     * Variables
+     */
+    const isAstro = framework === 'astro'
+    const isTs = await isTypescript(process.cwd(), framework, ts)
+    const isBuilder = builder === 'builder'
+    const isTailwind = ['tailwind', 'tailwind-material'].indexOf(theme) !== -1
+    const isBootstrap = ['bootstrap'].indexOf(theme) !== -1
+    const sourcePath = path.join(__dirname, 'files', builder, framework, theme, isTs ? 'ts' : 'js')
+    const targetPath = process.cwd()
+
     /**
      * Install Tailwind
      */
@@ -175,11 +181,15 @@ async function main() {
     }
 
     /**
-     * Install Vue in Astro
+     * Astro updates
      */
     if (isAstro) {
+      // Install Vue in Astro
       console.log('Installing Vue...')
       await runCommand('npm', ['install', 'vue', '@astrojs/vue'])
+
+      // Extend tsconfig.json
+      await updateAstroTsConfig(process.cwd())
     }
 
     /**
@@ -196,8 +206,6 @@ async function main() {
      * Copy Vueform files to project directory
      */
     console.log(`Copying additional files to ${projectName}...`)
-    const sourcePath = path.join(__dirname, 'files', builder, framework, theme, isTs ? 'ts' : 'js')
-    const targetPath = process.cwd()
     await copyFilesToProject(sourcePath, targetPath)
 
     console.log('')
@@ -256,6 +264,46 @@ async function directoryExists(path) {
   }
 }
 
+async function isTypescript(dir, framework, ts) {
+  switch (framework) {
+    case 'nuxt':
+      return true
+      break
+
+    case 'astro':
+      const tsConfigPath = path.join(dir, 'tsconfig.json')
+      
+      try {
+        const tsConfig = await fsExtra.readJson(tsConfigPath)
+
+        return tsConfig.extends !== 'astro/tsconfigs/base'
+      } catch (err) {
+        console.error('Error reading tsconfig.json:', err)
+      }
+      break
+
+    default:
+      return ts
+  }
+}
+
+async function updateAstroTsConfig(dir) {
+  const tsConfigPath = path.join(dir, 'tsconfig.json')
+
+  try {
+    const tsConfig = await fsExtra.readJson(tsConfigPath)
+
+    tsConfig.compilerOptions = {
+      'jsx': 'preserve'
+    }
+
+    await fsExtra.writeJson(tsConfigPath, tsConfig, { spaces: 2 })
+    console.log('tsconfig.json has been updated')
+  } catch (err) {
+    console.error('Error updating tsconfig.json:', err)
+  }
+}
+
 async function copyFilesToProject(sourceDir, targetDir) {
   try {
     await fsExtra.copy(sourceDir, targetDir, { overwrite: true })