jlengrand/rocket
1
0
Fork 0
mirror of https://github.com/modernweb-dev/rocket.git synced 2026-03-10 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: POC

Browse Source
This commit is contained in:
Thomas Allmer
2021-02-23 20:36:26 +01:00
committed by Thomas Allmer
parent 818caad7cb
commit 00ebeea10f
19 changed files with 505 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_includes/layout-playground.njk Normal file
View File

@@ -0,0 +1,14 @@
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground</title>
<body>
<rocket-playground></rocket-playground>
<script src="https://unpkg.com/wasm-flate@0.1.12-alpha/dist/bootstrap.js"></script>
<script type="module">
import '@rocket/playground/rocket-playground';
</script>
</body>
</html>

3
docs/playground.md Normal file
View File

@@ -0,0 +1,3 @@
---
layout: layout-playground
---

6
packages/cli/src/RocketStart.js
View File

@@ -58,6 +58,12 @@ export class RocketStart {
setupRollupPlugins: this.config.setupDevAndBuildPlugins,
setupPlugins: this.config.setupDevPlugins,
middleware: [
function rewriteIndex(context, next) {
context.set('Access-Control-Allow-Origin', '*');
return next();
},
],
},
[],
{ rollupWrapperFunction: fromRollup },

1
packages/launch/package.json
View File

@@ -19,6 +19,7 @@
".": "./index.js",
"./preset/": "./preset/",
"./inline-notification": "./inline-notification/index.js",
"./inline-notification-element": "./inline-notification/inline-notification.js",
"./inline-notification/inline-notification.js": "./inline-notification/inline-notification.js"
},
"scripts": {

3
packages/playground/README.md Normal file
View File

@@ -0,0 +1,3 @@
# Story element for mdjs
For docs please see our homepage [https://rocket.modern-web.dev/docs/markdown-javascript/story/](https://rocket.modern-web.dev/docs/markdown-javascript/story/).

1
packages/playground/index.js Normal file
View File

@@ -0,0 +1 @@
export { RocketPlayground } from './src/RocketPlayground.js';

40
packages/playground/package.json Normal file
View File

@@ -0,0 +1,40 @@
{
"name": "@rocket/playground",
"version": "0.1.1",
"publishConfig": {
"access": "public"
},
"description": "Rendering storybook story functions inside a story window with show code capabilities",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/modernweb-dev/rocket.git",
"directory": "packages/mdjs-story"
},
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
"homepage": "https://rocket.modern-web.dev/docs/markdown-javascript/story/",
"type": "module",
"exports": {
".": "./index.js",
"./rocket-playground": "./rocket-playground.js"
},
"scripts": {
"debug": "cd ../../ && npm run debug -- --group mdjs-story",
"test": "npm run test:web",
"test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
"test:node": "mocha --timeout 5000 test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}",
"test:web": "cd ../../ && npm run test:web -- --group mdjs-story"
},
"files": [
"*.js",
"assets",
"dist-types",
"src"
],
"dependencies": {
"@vanillawc/wc-monaco-editor": "^1.10.12",
"lit-element": "^2.4.0",
"wasm-flate": "^1.0.2-browser"
},
"types": "dist-types/index.d.ts"
}

3
packages/playground/rocket-playground.js Normal file
View File

@@ -0,0 +1,3 @@
import { RocketPlayground } from './src/RocketPlayground.js';
customElements.define('rocket-playground', RocketPlayground);

133
packages/playground/src/DevicePreview.js Normal file
View File

@@ -0,0 +1,133 @@
import { LitElement, html, css } from 'lit-element';
import frame from './frame.svg.js';
const DEVICES = {
contentFlow: {
name: 'Content Flow',
system: 'web',
width: 'auto',
height: 'auto',
dpr: 1,
},
webSmall: {
name: 'Web Small',
system: 'web',
width: 360,
height: 640,
dpr: 1,
},
pixel2: {
name: 'Pixel 2',
system: 'android',
width: 411,
height: 731,
dpr: 2.6,
},
galaxyS5: {
name: 'Galaxy 5',
system: 'android',
width: 360,
height: 640,
dpr: 3,
},
iphoneX: {
name: 'iPhone X',
system: 'ios',
width: 375,
height: 812,
dpr: 3,
},
};
export class DevicePreview extends LitElement {
static get properties() {
return {
jsCode: { type: String },
device: { type: String, reflect: true },
};
}
constructor() {
super();
this.jsCode = '';
this.device = 'pixel2';
this.iframe = null;
}
static get styles() {
return [
css`
:host {
display: block;
position: relative;
}
iframe {
border: none;
background: #fff;
background: green;
}
:host([device='pixel2']) iframe {
width: 411px;
height: 640px;
}
div,
iframe {
position: absolute;
}
iframe {
top: 100px;
left: 100px;
}
svg {
width: 587px;
}
`,
];
}
update(changedProperties) {
super.update(changedProperties);
if (this.iframe) {
const iframeContent = `
<html>
<head>
<script type="importmap">
{
"imports": {
"lit-html": "http://localhost:8000/__wds-outside-root__/1/node_modules/lit-html/lit-html.js",
"@rocket/launch/inline-notification-element": "http://localhost:8000/__wds-outside-root__/1/packages/launch/inline-notification/inline-notification.js"
}
}
</script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
<script type="module">
${this.jsCode}
</script>
<body></body>
</html>
`;
this.iframe.src = `data:text/html;charset=utf-8,${encodeURIComponent(iframeContent)}`;
}
}
firstUpdated() {
this.iframe = this.shadowRoot.querySelector('iframe');
}
render() {
return html`
<iframe
sandbox="allow-scripts"
csp="script-src localhost:8000 'unsafe-inline'; connect-src 'none'"
></iframe>
<div>${frame(html)}</div>
`;
}
}

170
packages/playground/src/RocketPlayground.js Normal file
View File

@@ -0,0 +1,170 @@
import { LitElement, html, css } from 'lit-element';
import '@vanillawc/wc-monaco-editor';
import './device-preview.js';
/**
* @typedef {object} StoryOptions
* @property {ShadowRoot | null} StoryOptions.shadowRoot
*/
/** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
/** @typedef {import('./devices.js').devices} devices */
export function createViewer(jsCode) {
const iframeViewer = document.createElement('iframe');
const iframeContent = `
<html>
<head>
<script type="importmap">
{
"imports": {
"lit-html": "http://localhost:8000/__wds-outside-root__/1/node_modules/lit-html/lit-html.js"
}
}
</script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
<script type="module">
${jsCode}
</script>
<body></body>
</html>
`;
iframeViewer.setAttribute('style', `border: none; background: #fff;`);
iframeViewer.setAttribute('sandbox', 'allow-scripts');
iframeViewer.setAttribute('csp', "script-src localhost:8000 'unsafe-inline'; connect-src 'none'");
// Uses a data url as when using srcdoc the iframe csp rules get ignored?
// iframeViewer.setAttribute('srcdoc', iframeContent);
iframeViewer.src = `data:text/html;charset=utf-8,${escape(iframeContent)}`;
return iframeViewer;
}
/**
* Renders a story
*
* @element mdjs-story
* @prop {StoryFn} [story=(() => TemplateResult)] Function that returns the story
*/
export class RocketPlayground extends LitElement {
static get properties() {
return {
story: {
attribute: false,
},
jsCode: {
type: String,
},
showDevices: {
type: Array,
},
};
}
constructor() {
super();
/** @type {LitHtmlStoryFn} */
this.story = () => html` <p>Loading...</p> `;
this.jsCode = '';
// this.story({ shadowRoot: this.shadowRoot });
this.urlState = new URLSearchParams(document.location.search);
// this.urlState.append('jsCode', '');
/**
* @type {Array<keyof devices>}
*/
this.showDevices = ['pixel2'];
}
setJsCode(jsCode) {
const encoded = flate.gzip_encode(jsCode);
this.urlState.set('jsCode', encoded);
this.updateUrl();
this.jsCode = jsCode;
}
updateUrl() {
history.pushState('', '', '?' + this.urlState.toString());
}
// createRenderRoot() {
// return this;
// }
setup() {
this.editorWc = this.querySelector('wc-monaco-editor');
if (this.editorWc) {
this.editorWc.tabSize = 2;
if (this.urlState.get('jsCode')) {
this.jsCode = flate.gzip_decode(this.urlState.get('jsCode'));
}
const value = [
"import { html, render } from 'lit-html';",
'export const foo = () => html`',
' <p>hey there</p>',
'`;',
"render(foo(), document.querySelector('body'))",
].join('\n');
this.editorWc.value = this.jsCode || value;
this.editorWc.editor.getModel().onDidChangeRawContentFast(() => {
this.setJsCode(this.editorWc.value);
});
}
}
firstUpdated() {
setTimeout(() => {
this.setup();
}, 100);
}
connectedCallback() {
super.connectedCallback();
this.editorWc = document.createElement('wc-monaco-editor');
this.editorWc.slot = 'editor';
this.editorWc.setAttribute('language', 'javascript');
this.appendChild(this.editorWc);
}
static get styles() {
return [
css`
:host {
display: flex;
height: 100%;
}
#editor-wrapper,
#devices-wrapper {
width: 50%;
}
`,
];
}
render() {
return html`
<div id="editor-wrapper">
<slot name="editor"></slot>
</div>
<div id="devices-wrapper">
${this.showDevices.map(
device => html` <device-preview .jsCode=${this.jsCode} .device=${device}></device-preview> `,
)}
</div>
`;
}
}

7
packages/playground/src/createImportMapForLocalPackages.js Normal file
View File

@@ -0,0 +1,7 @@
export async function createImportMapForLocalPackages(packages) {
for (const pkg of packages) {
const pkgJson = await import(pkg);
console.log({pkg, pkgJson});
}
}

3
packages/playground/src/device-preview.js Normal file
View File

@@ -0,0 +1,3 @@
import { DevicePreview } from './DevicePreview.js';
customElements.define('device-preview', DevicePreview);

37
packages/playground/src/devices.js Normal file
View File

@@ -0,0 +1,37 @@
export const devices = {
contentFlow: {
name: 'Content Flow',
system: 'web',
width: 'auto',
height: 'auto',
dpr: 1,
},
webSmall: {
name: 'Web Small',
system: 'web',
width: 360,
height: 640,
dpr: 1,
},
pixel2: {
name: 'Pixel 2',
system: 'android',
width: 411,
height: 731,
dpr: 2.6,
},
galaxyS5: {
name: 'Galaxy 5',
system: 'android',
width: 360,
height: 640,
dpr: 3,
},
iphoneX: {
name: 'iPhone X',
system: 'ios',
width: 375,
height: 812,
dpr: 3,
},
};

27
packages/playground/src/frame.svg.js Normal file
View File

@@ -0,0 +1,27 @@
export default tag => tag`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.782 992.748">
<defs>
<path id="reuse-0" d="M-328.071 77.934h87.321c3.158 3.241 3.966 6.64 0 10.357h-87.321c-2.388-2.89-5.443-5.624 0-10.357z" filter="url(#c)"/>
</defs>
<defs>
<filter id="c" width="1.02" height="1.18" x="-.01" y="-.09" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation=".388"/>
</filter>
<filter id="b" width="1.146" height="1.072" x="-.073" y="-.036" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="14.425"/>
</filter>
<linearGradient id="a">
<stop offset="0" stop-color="#ececec"/>
<stop offset="1" stop-color="#ececec" stop-opacity="0"/>
</linearGradient>
</defs>
<g transform="translate(-83.389 -12.472)">
<path fill-rule="evenodd" d="M121.945 32.979c-25.884 7.036-44.412 19.814-46.138 45.707l-.543 819.843c.093 25.7 10.39 46.875 47.222 56.291l413.614-.48c29.367-6.096 48.726-21.391 48.851-54.367l.543-818.4c-3.437-20.23-8.931-39.683-45.05-47.632zm431.2 46.298a3.26 3.26 0 013.267 3.258l.572 825.24a3.26 3.26 0 01-3.263 3.262l-459.512-.562a3.26 3.26 0 01-3.256-3.264l.567-823.549a3.26 3.26 0 013.251-3.258z" filter="url(#b)" opacity=".45" transform="translate(83.389 12.471) scale(.9375)"/>
<path fill="none" d="M325.826 41.2v964.02h-197.99c-23.97-6.931-42.562-21.032-44.447-57.409l.505-854.589c1.73-26.554 13.299-45.975 41.921-53.033zm-.052 0v964.02h197.99c23.97-6.931 42.562-21.032 44.447-57.409l-.505-854.589c-1.73-26.554-13.299-45.975-41.922-53.033z"/>
<path fill="#151515" fill-rule="evenodd" d="M193.16 44.552c-24.085 6.596-41.324 18.577-42.93 42.852l-.506 768.63c.088 24.094 9.67 43.949 43.942 52.777l384.868-.45c27.326-5.715 45.34-20.057 45.456-50.973l.505-767.278c-3.198-18.965-8.31-37.204-41.92-44.656zm395.232 66.864a2.863 2.863 0 012.871 2.862l.504 724.803a2.863 2.863 0 01-2.868 2.866l-403.586-.495a2.863 2.863 0 01-2.86-2.865l.498-723.318a2.863 2.863 0 012.856-2.862z"/>
<use filter="url(#c)" transform="matrix(1.00398 0 0 1.14592 671.843 -16.339)" xlink:href="#reuse-0"/>
<ellipse cx="532.319" cy="77.836" rx="8.207" ry="7.955"/>
<use filter="url(#c)" transform="matrix(1.00398 0 0 1.14592 671.843 778.763)" xlink:href="#reuse-0"/>
</g>
</svg>
`;

0
packages/playground/src/sample.js Normal file
View File

19
packages/playground/test-node/createImportMapForLocalPackages.test.js Normal file
View File

@@ -0,0 +1,19 @@
import chai from 'chai';
import path from 'path';
import { fileURLToPath } from 'url';
import { createImportMapForLocalPackages } from '../src/createImportMapForLocalPackages.js';
const { expect } = chai;
const __dirname = path.dirname(fileURLToPath(import.meta.url));
describe('normalizeConfig', () => {
it.only('makes sure essential settings are there', async () => {
const importMap = await createImportMapForLocalPackages(['@rocket/launch']);
expect(importMap).to.deep.equal({
imports: {
"@rocket/launch/inline-notification-element": "http://localhost:8000/__wds-outside-root__/1/packages/launch/inline-notification/inline-notification.js"
}
});
});
});

24
packages/playground/tsconfig.json Normal file
View File

@@ -0,0 +1,24 @@
// Don't edit this file directly. It is generated by /scripts/update-package-configs.ts
{
"extends": "../../tsconfig.browser-base.json",
"compilerOptions": {
"module": "ESNext",
"outDir": "./dist-types",
"rootDir": ".",
"composite": true,
"allowJs": true,
"checkJs": true,
"emitDeclarationOnly": true
},
"references": [],
"include": [
"src",
"*.js",
"types"
],
"exclude": [
"dist",
"dist-types"
]
}

7
rocket.config.js
View File

@@ -3,9 +3,10 @@ import { rocketBlog } from '@rocket/blog';
import { rocketSearch } from '@rocket/search';
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
export default {
/** @type {Partial<import("./packages/cli/types/main").RocketCliOptions>} */
const config = {
presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
// emptyOutputDir: false,
};
}
export default config;

10
yarn.lock
View File

@@ -1778,6 +1778,11 @@
resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
"@vanillawc/wc-monaco-editor@^1.10.12":
version "1.10.12"
resolved "https://registry.yarnpkg.com/@vanillawc/wc-monaco-editor/-/wc-monaco-editor-1.10.12.tgz#73ae976b27fecfbef034df0cd2ea3608f4457180"
integrity sha512-UOFs6eCf30qWQE8J4+e6axlcoZAKfa/rOgcqMB70s7UvAzQYnE0zpbWmTyRPCG6ARmuHXDkaxjkG8DXywZfJDA==
"@web/browser-logs@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@web/browser-logs/-/browser-logs-0.2.0.tgz#3f39d59154bf668f0bce467026354ff2b9f3e06b"
@@ -8744,6 +8749,11 @@ void-elements@^2.0.1:
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
wasm-flate@^1.0.2-browser:
version "1.0.2-browser"
resolved "https://registry.yarnpkg.com/wasm-flate/-/wasm-flate-1.0.2-browser.tgz#e10e758b37c3d38829b54809fa2fef853b48131c"
integrity sha512-qpqOzvbKtgG/2Mb0DYXVPQ2nOrkKYoAQtpr4QZzgO8SMfKieeODUy2vomMnimQjH/K2RGWnw+kZmO8yf+Yh9qA==
wcwidth@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"