diff --git a/.changeset/eight-phones-worry.md b/.changeset/eight-phones-worry.md new file mode 100644 index 000000000..81f03003e --- /dev/null +++ b/.changeset/eight-phones-worry.md @@ -0,0 +1,29 @@ +--- +'sku': minor +--- + +**Playroom:** Update to v0.22.0, add `playroomScope` option + +You can now use Playroom's new custom scope feature by providing a `playroomScope` file. + +**EXAMPLE USAGE** + +sku.config.js: + +```js +module.exports = { + playroomScope: './playroom/useScope.ts', +} +``` + +useScope.ts: + +```js +import { useToast } from 'braid-design-system'; + +export default function useScope() { + return { + showToast: useToast() + } +} +``` diff --git a/config/playroom/makePlayroomConfig.js b/config/playroom/makePlayroomConfig.js index 18c4916f9..ddbe8bef9 100644 --- a/config/playroom/makePlayroomConfig.js +++ b/config/playroom/makePlayroomConfig.js @@ -35,6 +35,7 @@ module.exports = () => themes: paths.playroomThemes, snippets: paths.playroomSnippets, frameComponent: paths.playroomFrameComponent, + scope: paths.playroomScope, openBrowser: process.env.OPEN_TAB !== 'false', ...playroom, webpackConfig: () => ({ diff --git a/context/configSchema.js b/context/configSchema.js index eb2119fe6..f761c3a8c 100644 --- a/context/configSchema.js +++ b/context/configSchema.js @@ -145,6 +145,7 @@ module.exports = validator.compile({ playroomThemes: { type: 'string', optional: true }, playroomSnippets: { type: 'string', optional: true }, playroomFrameComponent: { type: 'string', optional: true }, + playroomScope: { type: 'string', optional: true }, playroomTarget: { type: 'string', optional: true }, playroomWidths: { type: 'array', diff --git a/context/defaultSkuConfig.js b/context/defaultSkuConfig.js index 7c9534214..8ed8c7613 100644 --- a/context/defaultSkuConfig.js +++ b/context/defaultSkuConfig.js @@ -42,6 +42,7 @@ module.exports = { playroomThemes: null, playroomSnippets: null, playroomFrameComponent: null, + playroomScope: null, playroomTitle: null, playroomPort: 8082, playroomParamType: null, diff --git a/context/index.js b/context/index.js index 36d1b21bc..2ce307a94 100644 --- a/context/index.js +++ b/context/index.js @@ -121,6 +121,9 @@ const paths = { playroomFrameComponent: skuConfig.playroomFrameComponent ? getPathFromCwd(skuConfig.playroomFrameComponent) : null, + playroomScope: skuConfig.playroomScope + ? getPathFromCwd(skuConfig.playroomScope) + : null, }; module.exports = { diff --git a/docs/docs/configuration.md b/docs/docs/configuration.md index 369743e59..582e3c43b 100644 --- a/docs/docs/configuration.md +++ b/docs/docs/configuration.md @@ -356,6 +356,12 @@ type `string` The file that exports a component that wraps each frame within Playroom. +## playroomScope + +type `string` + +The file that exports a function that provides a custom scope object. + ## playroomWidths type `Array` diff --git a/docs/docs/playroom.md b/docs/docs/playroom.md index 3442078b8..bf38708e6 100644 --- a/docs/docs/playroom.md +++ b/docs/docs/playroom.md @@ -17,6 +17,7 @@ module.exports = { playroomThemes: './src/themes.js', playroomSnippets: './playroom/snippets.js', playroomFrameComponent: './playroom/FrameComponent.js', + playroomScope: './playroom/scope.js', }; ``` diff --git a/package.json b/package.json index 630a85e07..4f10e65db 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,7 @@ "node-html-parser": "^1.2.16", "open": "^7.0.0", "path-to-regexp": "^6.0.0", - "playroom": "^0.21.1", + "playroom": "^0.22.0", "postcss-js": "^2.0.2", "postcss-loader": "^3.0.0", "prettier": "2.0.2", diff --git a/yarn.lock b/yarn.lock index 2bd45ab84..dc603be64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11810,10 +11810,10 @@ pkg-up@^3.1.0: dependencies: find-up "^3.0.0" -playroom@^0.21.1: - version "0.21.1" - resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.21.1.tgz#5a91602f323975c41870ea2bd86eba8c18c09c99" - integrity sha512-GhowhPDwzlYctfZ40YvcWVSpwkZaZ0b0n+k7LwBgtXjRUIxpC4rxpzhHM84xFzFqGh8ecOXNnhhfRem3BzvyQw== +playroom@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.22.0.tgz#719f34e4691b3da5c219b4ee8be692c5efa5ae1c" + integrity sha512-PozSTbKiu+FwsOebtOBGGhcwOuTkqubnBP/DaCXreHpunriHLXuWvQLoTlI1fpNgE4M2wYM2Mne4XZ6N17xGjg== dependencies: "@babel/cli" "^7.8.3" "@babel/core" "^7.8.3"