diff --git a/packages/sitecore-jss-cli/src/scripts/deploy.files.ts b/packages/sitecore-jss-cli/src/scripts/deploy.files.ts index 417d90784d..7921cb7032 100644 --- a/packages/sitecore-jss-cli/src/scripts/deploy.files.ts +++ b/packages/sitecore-jss-cli/src/scripts/deploy.files.ts @@ -35,7 +35,7 @@ export const builder = { type: 'boolean', describe: 'If true, no build task is invoked and any existing build artifacts at the source path are deployed.', - default: 'false', + default: false, }, buildTaskName: { requiresArg: false, @@ -50,7 +50,7 @@ export const builder = { type: 'boolean', describe: 'Whether to delete all existing items in the destination before copying new artifacts.', - default: 'false', + default: false, }, }; diff --git a/packages/sitecore-jss-forms/src/FormField.ts b/packages/sitecore-jss-forms/src/FormField.ts index 0d0462f2ca..7003d4c6dd 100644 --- a/packages/sitecore-jss-forms/src/FormField.ts +++ b/packages/sitecore-jss-forms/src/FormField.ts @@ -1,5 +1,5 @@ import { HtmlFormField } from './HtmlFormField'; -import { InputViewModel, TitleFieldViewModel, ViewModel } from './ViewModel'; +import { InputViewModel, TitleFieldViewModel, ViewModel, FieldViewModel } from './ViewModel'; export interface FormField { model: TViewModel; @@ -29,7 +29,7 @@ export function instanceOfButtonFormField(object: FormField): object is ButtonFo return 'buttonField' in object; } -export interface FormFieldSection extends FormField { +export interface FormFieldSection extends FormField { fields: FormField[]; } diff --git a/packages/sitecore-jss-react-forms/src/components/field-templates/section.tsx b/packages/sitecore-jss-react-forms/src/components/field-templates/section.tsx index f16162353e..aac8404d92 100644 --- a/packages/sitecore-jss-react-forms/src/components/field-templates/section.tsx +++ b/packages/sitecore-jss-react-forms/src/components/field-templates/section.tsx @@ -6,7 +6,7 @@ const Section: React.FunctionComponent> = ({ field, fieldFactory, }) => ( -
+
{field.fields.map(fieldFactory)}
); diff --git a/packages/sitecore-jss-react/src/components/Image.test.tsx b/packages/sitecore-jss-react/src/components/Image.test.tsx index 893310ca14..7ad7d4caa1 100644 --- a/packages/sitecore-jss-react/src/components/Image.test.tsx +++ b/packages/sitecore-jss-react/src/components/Image.test.tsx @@ -42,6 +42,35 @@ describe('', () => { }); }); + describe('with responsive image object', () => { + const props = { + media: { + src: '/assets/img/test0.png', + }, + srcSet: [{ mw: 100 }, { mw: 300 }], + sizes: '(min-width: 960px) 300px, 100px', + id: 'some-id', + className: 'the-dude-abides', + }; + + const rendered = mount().find('img'); + + it('should render with needed img tags', () => { + expect(rendered).to.have.length(1); + expect(rendered.prop('src')).to.equal(props.media.src); + expect(rendered.prop('srcSet')).to.equal('/assets/img/test0.png?mw=100 100w, /assets/img/test0.png?mw=300 300w'); + expect(rendered.prop('sizes')).to.equal('(min-width: 960px) 300px, 100px'); + }); + + it('should render with non-media props', () => { + expect(rendered.prop('id')).to.equal(props.id); + }); + + it('should render with style and className props', () => { + expect(rendered.prop('className')).to.eql(props.className); + }); + }); + describe('with "value" property value', () => { const props = { media: { value: { src: '/assets/img/test0.png', alt: 'my image' } }, diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index c8bfb64f8a..b6c0c530c3 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -97,9 +97,9 @@ const getImageAttrs = ( if (srcSet) { // replace with HTML-formatted srcset, including updated image URLs newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams); - } else { - newAttrs.src = resolvedSrc; } + // always output original src as fallback for older browsers + newAttrs.src = resolvedSrc; return newAttrs; }; @@ -176,4 +176,4 @@ Image.defaultProps = { editable: true, }; -Image.displayName = 'Image'; \ No newline at end of file +Image.displayName = 'Image'; diff --git a/samples/react/package-lock.json b/samples/react/package-lock.json index 2622c27af7..065640cc3b 100644 --- a/samples/react/package-lock.json +++ b/samples/react/package-lock.json @@ -1416,6 +1416,7 @@ "@sitecore-jss/sitecore-jss-manifest": "^11.0.2", "chalk": "^2.4.1", "cross-spawn": "^6.0.5", + "fs-extra": "^7.0.0", "glob": "^7.1.3", "jszip": "^3.1.5", "readline-sync": "^1.4.9", @@ -1442,6 +1443,17 @@ "wrap-ansi": "^2.0.0" } }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, "get-caller-file": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", @@ -1570,6 +1582,7 @@ "chokidar": "^2.0.4", "del": "^3.0.0", "express": "^4.16.4", + "fs-extra": "^7.0.0", "glob": "^7.1.3", "js-yaml": "^3.12.0", "readline-sync": "^1.4.9", @@ -1598,6 +1611,17 @@ "upath": "^1.1.1" } }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, "fsevents": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz", @@ -2193,6 +2217,7 @@ "requires": { "@sitecore-jss/sitecore-jss": "^11.0.2", "@sitecore-jss/sitecore-pipelines": "^11.0.2", + "fs-extra": "^7.0.0", "glob": "^7.1.3", "import-fresh": "^2.0.0", "joi": "^14.0.0", @@ -2218,6 +2243,17 @@ "wrap-ansi": "^2.0.0" } }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, "get-caller-file": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", @@ -8888,8 +8924,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -9262,8 +9297,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -9311,7 +9345,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9350,13 +9383,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } } @@ -12526,9 +12557,9 @@ "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==" }, "promise": { - "version": "8.0.3", - "resolved": "https://registry.npmjs.org/promise/-/promise-8.0.3.tgz", - "integrity": "sha512-HeRDUL1RJiLhyA0/grn+PTShlBAcLuh/1BJGtrvjwbvRDCTLLMEz9rOGCV+R3vHY4MixIuoMEd9Yq/XvsTPcjw==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz", + "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==", "requires": { "asap": "~2.0.6" } @@ -15635,8 +15666,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -15673,8 +15703,7 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", @@ -15683,8 +15712,7 @@ }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -15787,8 +15815,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -15798,7 +15825,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -15818,13 +15844,11 @@ }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -15841,7 +15865,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -15922,8 +15945,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -15933,7 +15955,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -16009,8 +16030,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -16040,7 +16060,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -16058,7 +16077,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -16097,13 +16115,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -16473,8 +16489,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -16511,8 +16526,7 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", @@ -16521,8 +16535,7 @@ }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -16636,7 +16649,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -16656,13 +16668,11 @@ }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -16679,7 +16689,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -16760,8 +16769,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -16771,7 +16779,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -16847,8 +16854,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -16878,7 +16884,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -16896,7 +16901,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -16935,13 +16939,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -17176,9 +17178,22 @@ "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz", "integrity": "sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==", "requires": { + "fs-extra": "^7.0.0", "lodash": ">=3.5 <5", "object.entries": "^1.1.0", "tapable": "^1.0.0" + }, + "dependencies": { + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + } } }, "webpack-sources": { diff --git a/samples/react/package.json b/samples/react/package.json index 0179c4ae68..a8937b1de6 100644 --- a/samples/react/package.json +++ b/samples/react/package.json @@ -49,6 +49,7 @@ "isomorphic-fetch": "~2.2.1", "react": "~16.9.0", "react-apollo": "~3.1.1", + "react-app-polyfill": "^1.0.6", "react-dom": "~16.9.0", "react-helmet": "~5.2.1", "react-i18next": "~11.3.3", diff --git a/samples/react/src/index.js b/samples/react/src/index.js index 4bf1b4879d..b9418e068f 100644 --- a/samples/react/src/index.js +++ b/samples/react/src/index.js @@ -1,3 +1,6 @@ +import 'react-app-polyfill/ie11'; +import 'react-app-polyfill/stable'; + import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; diff --git a/samples/vue/src/components/Styleguide/Styleguide-Specimen.vue b/samples/vue/src/components/Styleguide/Styleguide-Specimen.vue index 00d0fbd544..f05e37a119 100644 --- a/samples/vue/src/components/Styleguide/Styleguide-Specimen.vue +++ b/samples/vue/src/components/Styleguide/Styleguide-Specimen.vue @@ -9,7 +9,7 @@

- Implementation: /src/components/{{ rendering.componentName }}/index.js + Implementation: /src/components/Styleguide/{{ rendering.componentName }}.vue
Definition: /sitecore/definitions/components/{{ rendering.componentName }}.sitecore.js diff --git a/samples/vue/src/main.js b/samples/vue/src/main.js index cbd3143fe5..fab2b09ad1 100644 --- a/samples/vue/src/main.js +++ b/samples/vue/src/main.js @@ -1,8 +1,11 @@ import i18ninit from './i18n'; import { createApp } from './createApp'; +import config from './temp/config'; /* eslint-disable no-underscore-dangle */ +let initLanguage = config.defaultLanguage; + /* SSR Data If we're running in a server-side rendering scenario, @@ -13,20 +16,22 @@ import { createApp } from './createApp'; SSR is initiated from /server/server.js. */ +let __JSS_STATE__ = null; +const ssrRawJson = document.getElementById('__JSS_STATE__'); +if (ssrRawJson) { + __JSS_STATE__ = JSON.parse(ssrRawJson.innerHTML); +} +if (__JSS_STATE__) { + // set i18n language SSR state language instead of static config default language + initLanguage = __JSS_STATE__.sitecore.context.language; +} // initialize the dictionary, then render the app // note: if not making a multlingual app, the dictionary init can be removed. -i18ninit().then((i18n) => { +i18ninit(initLanguage).then((i18n) => { // HTML element to place the app into const rootElement = document.getElementById('root'); - // retrieve the initial app state if it is defined - let __JSS_STATE__ = null; - const ssrRawJson = document.getElementById('__JSS_STATE__'); - if (ssrRawJson) { - __JSS_STATE__ = JSON.parse(ssrRawJson.innerHTML); - } - const initialState = __JSS_STATE__ || null; const { app } = createApp(initialState, i18n);