inertia_rails-contrib 0.2.1 → 0.3.0

data/lib/generators/inertia/install/templates/svelte/inertia.js

@@ -1,4 +1,5 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import  { mount } from 'svelte';
 
 createInertiaApp({
   // Set default page title
@@ -19,12 +20,11 @@ createInertiaApp({
     // and use the following lines.
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`]
-    // page.default.layout ||= (page) => createElement(Layout, null, page)
-    // return page
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
   },
 
   setup({ el, App, props }) {
-    new App({ target: el, props })
+    mount(App, { target: el, props })
   },
 })

data/lib/generators/inertia/install/templates/svelte/inertia.ts

@@ -0,0 +1,30 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+import { mount } from 'svelte'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    mount(App, { target: el, props })
+  },
+})

data/lib/generators/inertia/install/templates/svelte/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.js", "<%= js_destination_path %>/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

data/lib/generators/inertia/install/templates/svelte/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/generators/inertia/install/templates/svelte/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

data/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte

@@ -0,0 +1,116 @@
+<script>
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</script>
+
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+
+<div class="inertia_example">
+  <h1>Hello {name}!</h1>
+
+  <div>
+    <a href="https://inertia-rails.netlify.app" target="_blank">
+      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+    </a>
+    <a href="https://vite-ruby.netlify.app" target="_blank">
+      <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+
+  <div class="card">
+    <button on:click={handleClick}>
+      count is {count}
+    </button>
+    <p>
+      Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
+      HMR
+    </p>
+  </div>
+  <p class="read-the-docs">
+    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
+  </p>
+</div>
+
+<style>
+  .inertia_example {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #213547;
+    background-color: #ffffff;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 2.6em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .logo {
+    display: inline-block;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #e4023baa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+</style>

data/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name: string
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</script>
+
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+
+<div class="inertia_example">
+  <h1>Hello {name}!</h1>
+
+  <div>
+    <a href="https://inertia-rails.netlify.app" target="_blank">
+      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+    </a>
+    <a href="https://vite-ruby.netlify.app" target="_blank">
+      <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+
+  <div class="card">
+    <button on:click={handleClick}>
+      count is {count}
+    </button>
+    <p>
+      Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
+      HMR
+    </p>
+  </div>
+  <p class="read-the-docs">
+    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
+  </p>
+</div>
+
+<style>
+  .inertia_example {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #213547;
+    background-color: #ffffff;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 2.6em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .logo {
+    display: inline-block;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #e4023baa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+</style>

data/lib/generators/inertia/install/templates/svelte4/inertia.js

@@ -0,0 +1,29 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})

data/lib/generators/inertia/install/templates/svelte4/inertia.ts

@@ -0,0 +1,29 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})

data/lib/generators/inertia/install/templates/svelte4/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

data/lib/generators/inertia/install/templates/svelte4/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.js", "<%= js_destination_path %>/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

data/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

data/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue

@@ -0,0 +1,117 @@
+<template>
+  <Head title="Inertia + Vite Ruby + Vue Example" />
+
+  <div class="root">
+    <h1 class="h1">Hello {{ name }}!</h1>
+
+    <div>
+      <a href="https://inertia-rails.netlify.app" target="_blank">
+        <img class="logo" :src="inertiaSvg" alt="Inertia logo" />
+      </a>
+      <a href="https://vite-ruby.netlify.app" target="_blank">
+        <img class="logo vite" :src="viteRubySvg" alt="Vite Ruby logo" />
+      </a>
+      <a href="https://vuejs.org" target="_blank">
+        <img class="logo vue" :src="vueSvg" alt="Vue logo" />
+      </a>
+    </div>
+
+    <h2 class="h2">Inertia + Vite Ruby + Vue</h2>
+
+    <div class="card">
+      <button class="button" type="button" @click="count++">
+        count is {{ count }}
+      </button>
+      <p>
+        Edit <code>app/frontend/pages/InertiaExample.vue</code> and save to test
+        HMR
+      </p>
+    </div>
+    <p class="readTheDocs">
+      Click on the Inertia, Vite Ruby, and Vue logos to learn more
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+import vueSvg from '/assets/vue.svg'
+import inertiaSvg from '/assets/inertia.svg'
+import viteRubySvg from '/assets/vite_ruby.svg'
+
+defineProps({
+  name: String,
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+.root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.h2 {
+  font-size: 2.6em;
+  line-height: 1.1;
+}
+
+.button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+.button:hover {
+  border-color: #646cff;
+}
+.button:focus,
+.button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.logo {
+  display: inline-block;
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #e4023baa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #41b883aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.readTheDocs {
+  color: #888;
+}
+</style>

data/lib/generators/inertia/install/templates/vue/inertia.js

@@ -21,7 +21,7 @@ createInertiaApp({
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
     // const page = pages[`../pages/${name}.vue`]
-    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    // page.default.layout = page.default.layout || Layout
     // return page
   },
 

data/lib/generators/inertia/install/templates/vue/inertia.ts

@@ -0,0 +1,33 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import {createApp, DefineComponent, h} from 'vue'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', { eager: true })
+    return pages[`../pages/${name}.vue`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.vue`]
+    // page.default.layout = page.default.layout || Layout
+    // return page
+  },
+
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .mount(el)
+  },
+})

data/lib/generators/inertia/install/templates/vue/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.tsx", "<%= js_destination_path %>/**/*.vue"]
+}

data/lib/generators/inertia/install/templates/vue/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

data/lib/generators/inertia/install/templates/vue/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/generators/inertia/install/templates/vue/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt

@@ -0,0 +1,2 @@
+<h1><%= class_name %>#<%= @action %></h1>
+<p>Find me in <%= @path %></p>

data/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt

@@ -73,12 +73,12 @@ export default function Form({ <%= singular_table_name %>, onSubmit, submitText
 <% elsif attribute.attachments? -%>
         <input
           type="file"
-          multiple="multiple"
+          multiple
           name="<%= attribute.singular_name %>[]"
           id="<%= attribute.singular_name %>"
           onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
         />
-<% elsif attribute.field_type == :check_box -%>
+<% elsif input_type(attribute) == "checkbox" -%>
         <input
           type="<%= input_type(attribute) %>"
           name="<%= attribute.singular_name %>"