Initializer for Vue sample

packages/create-sitecore-jss/src/common/steps/transform.ts

@@ -14,7 +14,7 @@ import {
 import { diffLines, diffJson, Change } from 'diff';
 import { BaseArgs } from '../args/base';
 
-const COPY_ONLY_REGEX = /\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar)$/;
+const COPY_ONLY_REGEX = /(index\.html)$|\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar)$/;
 
 export type JsonPropertyType = number | string | (number | string)[] | JsonObjectType;
 export interface JsonObjectType {

packages/create-sitecore-jss/src/initializers/vue/args.ts

@@ -0,0 +1,5 @@
+import { ClientAppArgs } from './../../common/args/base';
+import { VueAnswer } from './prompts';
+import { StyleguideArgs } from '../../common/args/styleguide';
+
+export interface VueArgs extends ClientAppArgs, StyleguideArgs, Partial<VueAnswer> {}

packages/create-sitecore-jss/src/initializers/vue/index.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import { prompt } from 'inquirer';
+import { prompts, VueAnswer } from './prompts';
+import { Initializer } from '../../common/Initializer';
+import { transform } from '../../common/steps';
+import { VueArgs } from './args';
+import { FetchWith } from '../../common/prompts/base';
+import chalk from 'chalk';
+
+export default class VueInitializer implements Initializer {
+  get isBase() {
+    return true;
+  }
+
+  async init(args: VueArgs) {
+    const defaults = args.yes
+      ? {
+          appName: 'sitecore-jss-vue',
+          hostName: 'sitecore-jss-vue.dev.local',
+          fetchWith: FetchWith.GraphQL,
+          appPrefix: true,
+          language: '',
+        }
+      : {};
+
+    const answers = await prompt<VueAnswer>(prompts, { ...defaults, ...args });
+
+    const mergedArgs = {
+      ...args,
+      ...answers,
+    };
+
+    const templatePath = path.resolve(__dirname, '../../templates/vue');
+    await transform(templatePath, mergedArgs, {
+      filter: (filePath) => {
+        return !!mergedArgs.language || !filePath.endsWith('{{language}}.yml');
+      },
+    });
+
+    const response = {
+      appName: answers.appName,
+      nextSteps: [`* Connect to Sitecore with ${chalk.green('jss setup')} (optional)`],
+    };
+
+    return response;
+  }
+}

packages/create-sitecore-jss/src/initializers/vue/prompts.ts

@@ -0,0 +1,6 @@
+import { ClientAppAnswer, clientAppPrompts } from '../../common/prompts/base';
+import { StyleguideAnswer, styleguidePrompts } from '../../common/prompts/styleguide';
+
+export interface VueAnswer extends ClientAppAnswer, StyleguideAnswer {}
+
+export const prompts = [...clientAppPrompts, ...styleguidePrompts];

packages/create-sitecore-jss/src/templates/angular/data/routes/styleguide/custom-route-type/en.yml

@@ -9,4 +9,4 @@ fields:
   content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
 placeholders:
   <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: StyleguideCustomRouteType
+    - componentName: Styleguide-CustomRouteType

packages/create-sitecore-jss/src/templates/angular/data/routes/styleguide/en.yml

@@ -8,26 +8,26 @@ placeholders:
         content: |
           <p>This is a live set of examples of how to use JSS. For more information on using JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
           <p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>
-    - componentName: StyleguideLayout
+    - componentName: Styleguide-Layout
       placeholders:
         <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout:
-          - componentName: StyleguideSection
+          - componentName: Styleguide-Section
             fields:
               heading: Content Data
             placeholders:
               <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
-                - componentName: StyleguideFieldUsageText
+                - componentName: Styleguide-FieldUsage-Text
                   fields:
                     heading: Single-Line Text
                     sample: This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type="text">.
                     sample2: This is another sample text field using rendering options. <mark>HTML supported with encode=false.</mark> Cannot edit because editable=false.
-                - componentName: StyleguideFieldUsageText
+                - componentName: Styleguide-FieldUsage-Text
                   fields:
                     heading: Multi-Line Text
                     description: '<small>Multi-line text tells Sitecore to use a <code>textarea</code> for editing; consumption in JSS is the same as single-line text.</small>'
                     sample: This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea.
                     sample2: This is another sample multi-line text field using rendering options. <mark>HTML supported with encode=false.</mark>
-                - componentName: StyleguideFieldUsageRichText
+                - componentName: Styleguide-FieldUsage-RichText
                   fields:
                     heading: Rich Text
                     sample: <p>This is a sample rich text field. <mark>HTML is always supported.</mark> In Sitecore, editors will see a WYSIWYG editor for these fields.</p>
@@ -36,7 +36,7 @@ placeholders:
                     sample2: |
                       <p>Another sample rich text field, using options. Keep markup entered in rich text fields as simple as possible - ideally bare tags only (no classes). Adding a wrapping class can help with styling within rich text blocks.</p>
                       <marquee>But you can use any valid HTML in a rich text field!</marquee>
-                - componentName: StyleguideFieldUsageImage
+                - componentName: Styleguide-FieldUsage-Image
                   fields:
                     heading: Image
                     sample1:
@@ -45,7 +45,7 @@ placeholders:
                     sample2:
                       src: /data/media/img/jss_logo.png
                       alt: Sitecore JSS Logo
-                - componentName: StyleguideFieldUsageFile
+                - componentName: Styleguide-FieldUsage-File
                   fields:
                     heading: File
                     description: |
@@ -54,28 +54,27 @@ placeholders:
                       src: /data/media/files/jss.pdf
                       title: Example File
                       description: This data will be added to the Sitecore Media Library on import
-                - componentName: StyleguideFieldUsageNumber
+                - componentName: Styleguide-FieldUsage-Number
                   fields:
                     heading: Number
                     description: '<small>Number tells Sitecore to use a number entry for editing.</small>'
                     sample: 1.21
-                    sample2: 71
-                - componentName: StyleguideFieldUsageCheckbox
+                - componentName: Styleguide-FieldUsage-Checkbox
                   fields:
                     heading: Checkbox
                     description: |
                       <small>Note: Sitecore does not support inline editing of Checkbox fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.</small>
                     checkbox: true
                     checkbox2: false
-                - componentName: StyleguideFieldUsageDate
+                - componentName: Styleguide-FieldUsage-Date
                   fields:
                     heading: Date
                     description: |
                       <p><small>Both <code>Date</code> and <code>DateTime</code> field types are available. Choosing <code>DateTime</code> will make Sitecore show editing UI for time; both types store complete date and time values internally. Date values in JSS are formatted using <a href="https://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations" target="_blank">ISO 8601 formatted strings</a>, for example <code>2012-04-23T18:25:43.511Z</code>.</small></p>
                       <div class="alert alert-warning"><small>Note: this is a JavaScript date format (e.g. <code>new Date().toISOString()</code>), and is different from how Sitecore stores date field values internally. Sitecore-formatted dates will not work.</small></div>
-                    date: '2012-05-04T00:00:00.000Z'
-                    dateTime: '2018-03-14T15:00:00.000Z'
-                - componentName: StyleguideFieldUsageLink
+                    date: '2012-05-04T00:00:00Z'
+                    dateTime: '2018-03-14T15:00:00Z'
+                - componentName: Styleguide-FieldUsage-Link
                   fields:
                     heading: General Link
                     description: <p>A <em>General Link</em> is a field that represents an <code>&lt;a&gt;</code> tag.</p>
@@ -102,7 +101,7 @@ placeholders:
                       target: _blank
                       class: font-weight-bold
                       title: <a> title attribute
-                - componentName: StyleguideFieldUsageItemLink
+                - componentName: Styleguide-FieldUsage-ItemLink
                   fields:
                     heading: Item Link
                     description: |
@@ -124,7 +123,7 @@ placeholders:
                       template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
                       fields:
                         textField: Referenced item textField
-                - componentName: StyleguideFieldUsageContentList
+                - componentName: Styleguide-FieldUsage-ContentList
                   fields:
                     heading: Content List
                     description: |
@@ -155,7 +154,7 @@ placeholders:
                       - template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
                         fields:
                           textField: Hello World Item 2
-                - componentName: StyleguideFieldUsageCustom
+                - componentName: Styleguide-FieldUsage-Custom
                   fields:
                     heading: Custom Fields
                     description: |
@@ -167,12 +166,14 @@ placeholders:
                         </small>
                       </p>
                     customIntField: 31337
-          - componentName: StyleguideSection
+          - componentName: Styleguide-Section
             fields:
               heading: Layout Patterns
             placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-header:
+                - componentName: Styleguide-Layout-Reuse
               <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
-                - componentName: StyleguideLayoutReuse
+                - componentName: Styleguide-Layout-Reuse
                   fields:
                     heading: Reusing Content
                     description: <p>JSS provides powerful options to reuse content, whether it's sharing a common piece of text across pages or sketching out a site with repeating <em>lorem ipsum</em> content.</p>
@@ -189,38 +190,38 @@ placeholders:
                       - componentName: ContentBlock
                         fields:
                           content: <p>Mix and match reused and local content. Check out <code>/data/routes/styleguide/en.yml</code> to see how.</p>
-                - componentName: StyleguideLayoutTabs
+                - componentName: Styleguide-Layout-Tabs
                   fields:
                     heading: Tabs
                     description: <p>Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.</p>
                   placeholders:
                     <%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs:
-                      - componentName: StyleguideLayoutTabsTab
+                      - componentName: Styleguide-Layout-Tabs-Tab
                         fields:
                           title: Tab 1
                           content: <p>Tab 1 contents!</p>
-                      - componentName: StyleguideLayoutTabsTab
+                      - componentName: Styleguide-Layout-Tabs-Tab
                         fields:
                           title: Tab 2
                           content: <p>Tab 2 contents!</p>
-                      - componentName: StyleguideLayoutTabsTab
+                      - componentName: Styleguide-Layout-Tabs-Tab
                         fields:
                           title: Tab 3
                           content: <p>Tab 3 contents!</p>
-          - componentName: StyleguideSection
+          - componentName: Styleguide-Section
             fields:
               heading: Sitecore Patterns
             placeholders:
               <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
-                - componentName: StyleguideSitecoreContext
+                - componentName: Styleguide-SitecoreContext
                   fields:
                     heading: Sitecore Context
                     description: <p><small>The Sitecore Context contains route-level data about the current context - for example, <code>pageState</code> enables conditionally executing code based on whether Sitecore is in Experience Editor or not.</small></p>
-                - componentName: StyleguideRouteFields
+                - componentName: Styleguide-RouteFields
                   fields:
                     heading: Route-level Fields
                     description: <p><small>Route-level content fields are defined on the <em>route</em> instead of on a <em>component</em>. This allows multiple components to share the field data on the same route - and querying is much easier on route level fields, making <em>custom route types</em> ideal for filterable/queryable data such as articles.</small></p>
-                - componentName: StyleguideComponentParams
+                - componentName: Styleguide-ComponentParams
                   fields:
                     heading: Component Params
                     description: <p><small>Component params (also called Rendering Parameters) allow storing non-content parameters for a component. These params should be used for more technical options such as CSS class names or structural settings.</small></p>
@@ -230,24 +231,24 @@ placeholders:
                     # they are always sent to the component as strings.
                     columns: 5
                     useCallToAction: true
-                - componentName: StyleguideTracking
+                - componentName: Styleguide-Tracking
                   fields:
                     heading: Tracking
                     description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
-          - componentName: StyleguideSection
+          - componentName: Styleguide-Section
             fields:
               heading: Multilingual Patterns
             placeholders:
               <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
-                - componentName: StyleguideMultilingual
+                - componentName: Styleguide-Multilingual
                   fields:
                     heading: Translation Patterns
                     sample: This text can be translated in en.yml
-          - componentName: StyleguideSection
+                              - componentName: Styleguide-Section
             fields:
               heading: Angular Patterns
             placeholders:
               <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
-                - componentName: StyleguideAngularLazyLoading
+                - componentName: Styleguide-Angular-LazyLoading
                   fields:
                     heading: Lazy Loading

packages/create-sitecore-jss/src/templates/react/.prettierrc

@@ -3,6 +3,7 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
+  "useTabs": false,
   "trailingComma": "es5",
   "printWidth": 100
 }

packages/create-sitecore-jss/src/templates/vue/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

packages/create-sitecore-jss/src/templates/vue/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/vue3-essential', '@vue/prettier', 'plugin:yaml/recommended'],
+  plugins: ['yaml'],
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

packages/create-sitecore-jss/src/templates/vue/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+*.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+scjssconfig.json
+*.deploysecret.config

packages/create-sitecore-jss/src/templates/vue/.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

packages/create-sitecore-jss/src/templates/vue/.prettierignore

@@ -0,0 +1 @@
+package.json

packages/create-sitecore-jss/src/templates/vue/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "crlf",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "printWidth": 100
+}