Skip to content

Commit a000ed8

Browse files
addy-pathaniaCobyPearambrauerCobyPearilliakovalenko
authored
Initializer for Vue sample (#883)
* WIP: nextjs generator * WIP: diy generator * WIP: nextjs generator - build templates * Start of dedicated package 'create-sitecore-jss' * remove package-lock * Stubbed out build-templates.ts, added .gitignore * added build templates * WIP: nextjs initializer- ejs file render * Handling template command line parameter / prompt * Allow token replacement on file names * remove remaining disconnected files * Added check for empty directory * Remove remaining styleguide code * test name change for lerna versioning * updated yarn.lock * lerna test * Revert "lerna test" This reverts commit 451c35d. * get rid of mkdirp helper in favor of fs-extra * Add support for 'add' positinal param * Initial watch script * Fix templates, add prefix flag * added logs, detect initializer, feed args from json * refined the config file and added switch case to initializers * Adding diffing to 'add' * Styleguide sub-initializer WIP: prompts for diffs working * Update yes flag to override with passed in args * WIP: Add dependencies/scripts to package.json during post-init * Basic "next steps" introduced, some linting errors fixed * WIP: Removing code duplication between files, start refactor package.json logic * WIP: package.json, lint * Add diff prompt to package.json, use diffJson method for .json files * Add jss cli to base nextjs template and remove message about yarn * Add diff to package.json, add some missing template files * Move styleguide Navigation component to proper place in src, fix tsconfig * Remove unused stuff in cli package * Diy generator yarn install (#861) * yarn install * added yarn.lock * added chalk, added initialized flag * Add yarn.lock Co-authored-by: Addy Pathania <[email protected]> * Update error handling for transformFiles * Start adding unit tests for shared functions * Add test(s) * Add error message when adding post-init to non-JSS app * Reorganize and refactor some base functionality * WIP: Unit tests for helpers * Add coverage script, add support for deep merge of package.json files * Cover helpers by UT * Cover diffFiles by UT * Minor fixes - Fix default appName for styleguide init - Remove stray console.log from a template - Move sinon to devDependencies * Fix isJssApp UT * merge with dev and refactor * adde yarn lock * Update diffFiles test, fix sinon wrap error * Add litFix command, add missing ejs logic to connected demo tsx * group tests * Cover transform by UT * Cover cmd by UT * Restructure folders, delay install - Folder structure is now leaner - Watch and main() now use the same function to loop through multiple inits -> initRunner() * Fixes before demo * NextjsAnswer cleanup (remove redundant props, move/rename file to follow base Answer naming) * apply sitemap-fetcher plugin for disconnected * apply next.config plugin changes * Remove unnecessary devDependencies (main packages include own type definitions) * Rename transformPostInit to writeFiles, fix some tests * remove monorepo dev dependencies if dev environment * Fix scaffold script * added tests for writePackageJson helper * Revert "Fix scaffold script" This reverts commit dc1d1d4. * scaffold-component updates for disconnected/styleguide * removed extra sitemapFetcher import * fix removeDevDependencies check, consolidation in [[...path]].tsx * added _app.tsx (with bootstrap, nprogress) for nextjs-styleguide * "yes" handling for subsequent initializers (don't prompt for diffs when init on an empty directory) * only pass along __true__ "yes" answers * Initializers internationalization (#868) * Update template * Merge changes * fix answer type * Fix configs * add changes * make appPrefix false as default * update * fix indent * add HostName to NextJSAnswer * Fix issues after review * [NextJS] Refactor scaffold script to make it pluggable (#870) * Make bootstrap silent and refactor * Remove scaffold-component script * update PR * revert changes * revert * Refactor * Refactor scaffold script * Fix indent * [Initializers] Refactor prompts and answers (#872) * Refactoring * remove line * Update default app name Co-authored-by: Coby Sher <[email protected]> Co-authored-by: Coby Sher <[email protected]> * Update some ejs closing tags to trim unwanted newline * Refactor post-initializer flow (#874) * #511113 Refactored post-initializer flow * Fixes after merge. Added templates to BaseArgs (needed in order to suppress post-initializer prompt) * Added "Initializing ..." console message. Expanded silent suppression. * Fixed watch mode * * #511292 fixed issue where transform wasn't occurring on package.json file when existing file * fixed issue where package.json config values weren't being used in styleguide if args.yes == true * isJssApp now returns boolean * added tests, fixed broken ones * only run lint --fix if a lint script exists * [Initializers] Split `force`, `yes` flags (#877) * refactor yes/force flags * Fix unit tests * Use argv.destination by default * Add dynamic logic to init factory and base templates prompt choices * Add silent option to run * added vue initializer * skipped index.html file from ejs rendering * Add getAppPrefix helper to ejs data * remove 'yes' on initializer result (force now handling) * updates from pr feedback (error handling, language, defaults) * Resolve PR comments * bump hostname prompt before fetchWith (better flow when nextjs adds prerender) * use template name for default folder name (if appName not provided) * Resolve more PR comments * Add error handling for 'en' language input * more PR feedback updates * Resolve comments, make tests green * Update yarn.lock - fix CI * Add del-cli * Dynamically import watch.json, error when not there * updated vue args * added ejs token and prefixes * updated package.json * added ejs confitional to graphql and rest factory * updated files with ejs tokens and updated {{language}}.yml files * removed space and extra keywords from ejs tokens * fixed ejs conditional for language file * formatted ejs conditonals * filtered index.html through regex * fixed indentation issues * added index.html to regex * Update regex, prettierrc, some ejs tokens * Fix angular templates missing hyphens Co-authored-by: CobyPear <[email protected]> Co-authored-by: Adam Brauer <[email protected]> Co-authored-by: Coby Sher <[email protected]> Co-authored-by: illiakovalenko <[email protected]> Co-authored-by: Illia Kovalenko <[email protected]>
1 parent 448f7c8 commit a000ed8

File tree

147 files changed

+6463
-34
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

147 files changed

+6463
-34
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { diffLines, diffJson, Change } from 'diff';
1515
import { BaseArgs } from '../args/base';
1616

17-
const COPY_ONLY_REGEX = /\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar)$/;
17+
const COPY_ONLY_REGEX = /(index\.html)$|\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar)$/;
1818

1919
export type JsonPropertyType = number | string | (number | string)[] | JsonObjectType;
2020
export interface JsonObjectType {

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ClientAppArgs } from './../../common/args/base';
2+
import { VueAnswer } from './prompts';
3+
import { StyleguideArgs } from '../../common/args/styleguide';
4+
5+
export interface VueArgs extends ClientAppArgs, StyleguideArgs, Partial<VueAnswer> {}

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import path from 'path';
2+
import { prompt } from 'inquirer';
3+
import { prompts, VueAnswer } from './prompts';
4+
import { Initializer } from '../../common/Initializer';
5+
import { transform } from '../../common/steps';
6+
import { VueArgs } from './args';
7+
import { FetchWith } from '../../common/prompts/base';
8+
import chalk from 'chalk';
9+
10+
export default class VueInitializer implements Initializer {
11+
get isBase() {
12+
return true;
13+
}
14+
15+
async init(args: VueArgs) {
16+
const defaults = args.yes
17+
? {
18+
appName: 'sitecore-jss-vue',
19+
hostName: 'sitecore-jss-vue.dev.local',
20+
fetchWith: FetchWith.GraphQL,
21+
appPrefix: true,
22+
language: '',
23+
}
24+
: {};
25+
26+
const answers = await prompt<VueAnswer>(prompts, { ...defaults, ...args });
27+
28+
const mergedArgs = {
29+
...args,
30+
...answers,
31+
};
32+
33+
const templatePath = path.resolve(__dirname, '../../templates/vue');
34+
await transform(templatePath, mergedArgs, {
35+
filter: (filePath) => {
36+
return !!mergedArgs.language || !filePath.endsWith('{{language}}.yml');
37+
},
38+
});
39+
40+
const response = {
41+
appName: answers.appName,
42+
nextSteps: [`* Connect to Sitecore with ${chalk.green('jss setup')} (optional)`],
43+
};
44+
45+
return response;
46+
}
47+
}

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { ClientAppAnswer, clientAppPrompts } from '../../common/prompts/base';
2+
import { StyleguideAnswer, styleguidePrompts } from '../../common/prompts/styleguide';
3+
4+
export interface VueAnswer extends ClientAppAnswer, StyleguideAnswer {}
5+
6+
export const prompts = [...clientAppPrompts, ...styleguidePrompts];

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ fields:
99
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>
1010
placeholders:
1111
<%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
12-
- componentName: StyleguideCustomRouteType
12+
- componentName: Styleguide-CustomRouteType

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

+33-32
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,26 @@ placeholders:
88
content: |
99
<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>
1010
<p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>
11-
- componentName: StyleguideLayout
11+
- componentName: Styleguide-Layout
1212
placeholders:
1313
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout:
14-
- componentName: StyleguideSection
14+
- componentName: Styleguide-Section
1515
fields:
1616
heading: Content Data
1717
placeholders:
1818
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
19-
- componentName: StyleguideFieldUsageText
19+
- componentName: Styleguide-FieldUsage-Text
2020
fields:
2121
heading: Single-Line Text
2222
sample: This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type="text">.
2323
sample2: This is another sample text field using rendering options. <mark>HTML supported with encode=false.</mark> Cannot edit because editable=false.
24-
- componentName: StyleguideFieldUsageText
24+
- componentName: Styleguide-FieldUsage-Text
2525
fields:
2626
heading: Multi-Line Text
2727
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>'
2828
sample: This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea.
2929
sample2: This is another sample multi-line text field using rendering options. <mark>HTML supported with encode=false.</mark>
30-
- componentName: StyleguideFieldUsageRichText
30+
- componentName: Styleguide-FieldUsage-RichText
3131
fields:
3232
heading: Rich Text
3333
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:
3636
sample2: |
3737
<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>
3838
<marquee>But you can use any valid HTML in a rich text field!</marquee>
39-
- componentName: StyleguideFieldUsageImage
39+
- componentName: Styleguide-FieldUsage-Image
4040
fields:
4141
heading: Image
4242
sample1:
@@ -45,7 +45,7 @@ placeholders:
4545
sample2:
4646
src: /data/media/img/jss_logo.png
4747
alt: Sitecore JSS Logo
48-
- componentName: StyleguideFieldUsageFile
48+
- componentName: Styleguide-FieldUsage-File
4949
fields:
5050
heading: File
5151
description: |
@@ -54,28 +54,27 @@ placeholders:
5454
src: /data/media/files/jss.pdf
5555
title: Example File
5656
description: This data will be added to the Sitecore Media Library on import
57-
- componentName: StyleguideFieldUsageNumber
57+
- componentName: Styleguide-FieldUsage-Number
5858
fields:
5959
heading: Number
6060
description: '<small>Number tells Sitecore to use a number entry for editing.</small>'
6161
sample: 1.21
62-
sample2: 71
63-
- componentName: StyleguideFieldUsageCheckbox
62+
- componentName: Styleguide-FieldUsage-Checkbox
6463
fields:
6564
heading: Checkbox
6665
description: |
6766
<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>
6867
checkbox: true
6968
checkbox2: false
70-
- componentName: StyleguideFieldUsageDate
69+
- componentName: Styleguide-FieldUsage-Date
7170
fields:
7271
heading: Date
7372
description: |
7473
<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>
7574
<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>
76-
date: '2012-05-04T00:00:00.000Z'
77-
dateTime: '2018-03-14T15:00:00.000Z'
78-
- componentName: StyleguideFieldUsageLink
75+
date: '2012-05-04T00:00:00Z'
76+
dateTime: '2018-03-14T15:00:00Z'
77+
- componentName: Styleguide-FieldUsage-Link
7978
fields:
8079
heading: General Link
8180
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:
102101
target: _blank
103102
class: font-weight-bold
104103
title: <a> title attribute
105-
- componentName: StyleguideFieldUsageItemLink
104+
- componentName: Styleguide-FieldUsage-ItemLink
106105
fields:
107106
heading: Item Link
108107
description: |
@@ -124,7 +123,7 @@ placeholders:
124123
template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
125124
fields:
126125
textField: Referenced item textField
127-
- componentName: StyleguideFieldUsageContentList
126+
- componentName: Styleguide-FieldUsage-ContentList
128127
fields:
129128
heading: Content List
130129
description: |
@@ -155,7 +154,7 @@ placeholders:
155154
- template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
156155
fields:
157156
textField: Hello World Item 2
158-
- componentName: StyleguideFieldUsageCustom
157+
- componentName: Styleguide-FieldUsage-Custom
159158
fields:
160159
heading: Custom Fields
161160
description: |
@@ -167,12 +166,14 @@ placeholders:
167166
</small>
168167
</p>
169168
customIntField: 31337
170-
- componentName: StyleguideSection
169+
- componentName: Styleguide-Section
171170
fields:
172171
heading: Layout Patterns
173172
placeholders:
173+
<%- helper.getAppPrefix(appPrefix, appName) %>jss-header:
174+
- componentName: Styleguide-Layout-Reuse
174175
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
175-
- componentName: StyleguideLayoutReuse
176+
- componentName: Styleguide-Layout-Reuse
176177
fields:
177178
heading: Reusing Content
178179
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:
189190
- componentName: ContentBlock
190191
fields:
191192
content: <p>Mix and match reused and local content. Check out <code>/data/routes/styleguide/en.yml</code> to see how.</p>
192-
- componentName: StyleguideLayoutTabs
193+
- componentName: Styleguide-Layout-Tabs
193194
fields:
194195
heading: Tabs
195196
description: <p>Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.</p>
196197
placeholders:
197198
<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs:
198-
- componentName: StyleguideLayoutTabsTab
199+
- componentName: Styleguide-Layout-Tabs-Tab
199200
fields:
200201
title: Tab 1
201202
content: <p>Tab 1 contents!</p>
202-
- componentName: StyleguideLayoutTabsTab
203+
- componentName: Styleguide-Layout-Tabs-Tab
203204
fields:
204205
title: Tab 2
205206
content: <p>Tab 2 contents!</p>
206-
- componentName: StyleguideLayoutTabsTab
207+
- componentName: Styleguide-Layout-Tabs-Tab
207208
fields:
208209
title: Tab 3
209210
content: <p>Tab 3 contents!</p>
210-
- componentName: StyleguideSection
211+
- componentName: Styleguide-Section
211212
fields:
212213
heading: Sitecore Patterns
213214
placeholders:
214215
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
215-
- componentName: StyleguideSitecoreContext
216+
- componentName: Styleguide-SitecoreContext
216217
fields:
217218
heading: Sitecore Context
218219
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>
219-
- componentName: StyleguideRouteFields
220+
- componentName: Styleguide-RouteFields
220221
fields:
221222
heading: Route-level Fields
222223
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>
223-
- componentName: StyleguideComponentParams
224+
- componentName: Styleguide-ComponentParams
224225
fields:
225226
heading: Component Params
226227
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:
230231
# they are always sent to the component as strings.
231232
columns: 5
232233
useCallToAction: true
233-
- componentName: StyleguideTracking
234+
- componentName: Styleguide-Tracking
234235
fields:
235236
heading: Tracking
236237
description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
237-
- componentName: StyleguideSection
238+
- componentName: Styleguide-Section
238239
fields:
239240
heading: Multilingual Patterns
240241
placeholders:
241242
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
242-
- componentName: StyleguideMultilingual
243+
- componentName: Styleguide-Multilingual
243244
fields:
244245
heading: Translation Patterns
245246
sample: This text can be translated in en.yml
246-
- componentName: StyleguideSection
247+
- componentName: Styleguide-Section
247248
fields:
248249
heading: Angular Patterns
249250
placeholders:
250251
<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
251-
- componentName: StyleguideAngularLazyLoading
252+
- componentName: Styleguide-Angular-LazyLoading
252253
fields:
253254
heading: Lazy Loading

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

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"semi": true,
44
"singleQuote": true,
55
"tabWidth": 2,
6+
"useTabs": false,
67
"trailingComma": "es5",
78
"printWidth": 100
89
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not ie <= 8

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
6+
extends: ['plugin:vue/vue3-essential', '@vue/prettier', 'plugin:yaml/recommended'],
7+
plugins: ['yaml'],
8+
rules: {
9+
'no-console': 'off',
10+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
11+
},
12+
parserOptions: {
13+
parser: 'babel-eslint',
14+
},
15+
};

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
/tests/e2e/videos/
6+
/tests/e2e/screenshots/
7+
8+
# local env files
9+
.env.local
10+
.env.*.local
11+
12+
# Log files
13+
*.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw*
23+
24+
scjssconfig.json
25+
*.deploysecret.config

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {},
4+
},
5+
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package.json

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"endOfLine": "crlf",
3+
"singleQuote": true,
4+
"trailingComma": "es5",
5+
"useTabs": false,
6+
"tabWidth": 2,
7+
"arrowParens": "always",
8+
"printWidth": 100
9+
}

0 commit comments

Comments
 (0)