@salesforce/templates 66.17.0-beta.2 → 66.17.0

package/lib/templates/uiBundles/vuebasic/.forceignore

@@ -0,0 +1,15 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+
+# LWC configuration files
+**/jsconfig.json
+**/.eslintrc.json
+
+# LWC Jest
+**/__tests__/**
+
+node_modules/
+.DS_Store

package/lib/templates/uiBundles/vuebasic/.graphqlrc.yml

@@ -0,0 +1,2 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,js,ts,jsx,tsx,vue}'

package/lib/templates/uiBundles/vuebasic/.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+build
+.vite
+coverage
+*.min.js
+*.min.css
+*.map
+package-lock.json

package/lib/templates/uiBundles/vuebasic/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/lib/templates/uiBundles/vuebasic/README.md

@@ -0,0 +1,43 @@
+# Base Vue App
+
+Base Vue App is a template application that demonstrates how to build a Vue UI Bundle on the Salesforce platform with Vite, TypeScript, Tailwind, shadcn-vue, and the Salesforce UI Bundle SDK. It provides a minimal shell (home, 404), routing, and GraphQL codegen support so feature apps can extend it via the patches pipeline.
+
+This UI Bundle lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+
+## Table of contents
+
+- [Run (development)](#run-development)
+- [Build](#build)
+- [Test](#test)
+
+## Run (development)
+
+From the UI Bundle directory (`force-app/main/default/uiBundles/base-vue-app`):
+
+```bash
+npm install
+npm run dev
+```
+
+This starts the Vite dev server (e.g. http://localhost:5173). Use `npm run dev:design` to run in design mode.
+
+## Build
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run build
+```
+
+The production build is written to `dist/` inside the UI Bundle folder.
+
+## Test
+
+From the UI Bundle directory:
+
+```bash
+npm run test        # unit tests (Vitest)
+npm run build:e2e   # build for end-to-end
+npx playwright test # end-to-end tests (Playwright)
+```

package/lib/templates/uiBundles/vuebasic/_uibundle.uibundle-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <masterLabel><%= masterLabel %></masterLabel>
+    <description>A Salesforce UI Bundle.</description>
+    <isActive>true</isActive>
+    <version>1</version>
+</UIBundle>

package/lib/templates/uiBundles/vuebasic/codegen.yml

@@ -0,0 +1,95 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,ts,tsx,vue}'
+generates:
+  src/api/graphql-operations-types.ts:
+    plugins:
+      - 'graphql-codegen-typescript-operation-types'
+      - 'typescript-operations'
+    config:
+      onlyOperationTypes: true
+      skipTypename: true
+      preResolveTypes: true
+      scalars:
+        # String-serialized scalars
+        JSON:
+          input: 'string'
+          output: 'string'
+        Date:
+          input: 'string'
+          output: 'string'
+        DateTime:
+          input: 'string'
+          output: 'string'
+        Time:
+          input: 'string'
+          output: 'string'
+        Email:
+          input: 'string'
+          output: 'string'
+        Url:
+          input: 'string'
+          output: 'string'
+        PhoneNumber:
+          input: 'string'
+          output: 'string'
+        Picklist:
+          input: 'string'
+          output: 'string'
+        MultiPicklist:
+          input: 'string'
+          output: 'string'
+        TextArea:
+          input: 'string'
+          output: 'string'
+        LongTextArea:
+          input: 'string'
+          output: 'string'
+        RichTextArea:
+          input: 'string'
+          output: 'string'
+        EncryptedString:
+          input: 'string'
+          output: 'string'
+        Base64:
+          input: 'string'
+          output: 'string'
+        IdOrRef:
+          input: 'string'
+          output: 'string'
+        # BigDecimal-serialized scalars (accepts number or string, returns number)
+        Currency:
+          input: 'number | string'
+          output: 'number'
+        BigDecimal:
+          input: 'number | string'
+          output: 'number'
+        Double:
+          input: 'number | string'
+          output: 'number'
+        Percent:
+          input: 'number | string'
+          output: 'number'
+        Longitude:
+          input: 'number | string'
+          output: 'number'
+        Latitude:
+          input: 'number | string'
+          output: 'number'
+        # Integer-like scalars
+        Long:
+          input: 'number'
+          output: 'number'
+        BigInteger:
+          input: 'number'
+          output: 'number'
+        Short:
+          input: 'number'
+          output: 'number'
+        Byte:
+          input: 'number'
+          output: 'number'
+        Char:
+          input: 'number'
+          output: 'number'
+overwrite: true
+ignoreNoDocuments: true

package/lib/templates/uiBundles/vuebasic/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  }
+}

package/lib/templates/uiBundles/vuebasic/eslint.config.js

@@ -0,0 +1,110 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+import vueTsConfig from '@vue/eslint-config-typescript';
+import globals from 'globals';
+import graphqlPlugin from '@graphql-eslint/eslint-plugin';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const schemaPath = resolve(__dirname, '../../../../../schema.graphql');
+const schemaExists = existsSync(schemaPath);
+
+const config = [
+  // Global ignores
+  {
+    ignores: [
+      'build/**/*',
+      'dist/**/*',
+      'coverage/**/*',
+      'src/api/graphql-operations-types.ts',
+    ],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  ...vueTsConfig(),
+  // Main TypeScript/Vue files
+  {
+    files: ['**/*.{ts,vue}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        process: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      // Base app ships single-word component files (Home.vue, App.vue) mirroring
+      // the React template's page naming; allow them.
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+  // Test files
+  {
+    files: [
+      '**/*.test.{ts,tsx}',
+      '**/test/**/*.{ts,tsx}',
+      'src/test/**/*.{ts,tsx}',
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        global: 'writable',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+];
+
+// Only add GraphQL rules when schema exists (e.g. after graphql:schema).
+// In CI or when schema is not checked in, skip so lint succeeds.
+if (schemaExists) {
+  config.push(
+    {
+      files: ['**/*.{ts,vue}'],
+      processor: graphqlPlugin.processor,
+    },
+    {
+      files: ['**/*.graphql'],
+      languageOptions: {
+        parser: graphqlPlugin.parser,
+        parserOptions: {
+          graphQLConfig: {
+            schema: '../../../../../schema.graphql',
+          },
+        },
+      },
+      plugins: {
+        '@graphql-eslint': graphqlPlugin,
+      },
+      rules: {
+        '@graphql-eslint/no-anonymous-operations': 'error',
+        '@graphql-eslint/no-duplicate-fields': 'error',
+        '@graphql-eslint/known-fragment-names': 'error',
+        '@graphql-eslint/no-undefined-variables': 'error',
+        '@graphql-eslint/no-unused-variables': 'error',
+      },
+    }
+  );
+}
+
+export default config;

package/lib/templates/uiBundles/vuebasic/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Welcome to Vue App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>