mirror of
https://github.com/modernweb-dev/rocket.git
synced 2026-03-21 15:54:57 +00:00
Compare commits
1 Commits
@rocket/cl
...
feat/playg
| Author | SHA1 | Date | |
|---|---|---|---|
|
00ebeea10f |
5
.changeset/chilled-turkeys-help.md
Normal file
5
.changeset/chilled-turkeys-help.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@rocket/search': patch
|
||||
---
|
||||
|
||||
chore: generalize label & add alt when no img
|
||||
5
.changeset/many-points-eat.md
Normal file
5
.changeset/many-points-eat.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@mdjs/core': minor
|
||||
---
|
||||
|
||||
Extract building of the JavaScript setup code into a unified plugin called mdjsSetupCode
|
||||
5
.changeset/yellow-moose-play.md
Normal file
5
.changeset/yellow-moose-play.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@mdjs/core': patch
|
||||
---
|
||||
|
||||
You can provide a highlightCode function to the mdjsSetupCode unified plugin
|
||||
@@ -1,10 +0,0 @@
|
||||
html {
|
||||
--demo-background-color: #eee;
|
||||
--demo-color: #222;
|
||||
}
|
||||
|
||||
html[theme="dark"] body {
|
||||
background: #333;
|
||||
--demo-background-color: #888;
|
||||
--demo-color: #eee;
|
||||
}
|
||||
@@ -7,5 +7,3 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="twitter:creator" content="@modern_web_dev" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>
|
||||
|
||||
14
docs/_includes/layout-playground.njk
Normal file
14
docs/_includes/layout-playground.njk
Normal 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>
|
||||
@@ -1,69 +0,0 @@
|
||||
class DemoElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.platform = 'the web';
|
||||
this.language = 'en-US';
|
||||
this.theme = 'light';
|
||||
|
||||
this.observer = new MutationObserver(this.updateData);
|
||||
}
|
||||
|
||||
updateData = () => {
|
||||
this.platform = document.documentElement.getAttribute('platform') || 'the web';
|
||||
this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
|
||||
this.theme = document.documentElement.getAttribute('theme') || 'light';
|
||||
this.requestUpdate();
|
||||
};
|
||||
|
||||
connectedCallback() {
|
||||
this.updateData();
|
||||
|
||||
this.observer.observe(document.documentElement, { attributes: true });
|
||||
}
|
||||
|
||||
requestUpdate() {
|
||||
this.shadowRoot.innerHTML = this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--demo-background-color);
|
||||
color: var(--demo-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
:host[platform~="web"] {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
.about {
|
||||
display: flex;
|
||||
}
|
||||
.about ul {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Hello I am DemoElement 👋</p>
|
||||
<div class="about">
|
||||
<ul>
|
||||
<li>My purpose is to demonstrate how an element can adopt to different environments</li>
|
||||
<li>I like <strong>${this.platform}</strong></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>My mother languages is <strong>${this.language}</strong></li>
|
||||
<li>I feel very comfortable in the <strong>${this.theme}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-element', DemoElement);
|
||||
@@ -56,8 +56,8 @@ mdjs comes with some additional helpers you can choose to import:
|
||||
|
||||
````md
|
||||
```js script
|
||||
import '@mdjs/mdjs-story/define';
|
||||
import '@mdjs/mdjs-preview/define';
|
||||
import '@mdjs/mdjs-story/mdjs-story.js';
|
||||
import '@mdjs/mdjs-preview/mdjs-preview.js';
|
||||
```
|
||||
````
|
||||
|
||||
@@ -65,8 +65,8 @@ Once loaded you can use them like so:
|
||||
|
||||
````md
|
||||
```js script
|
||||
import '@mdjs/mdjs-story/define';
|
||||
import '@mdjs/mdjs-preview/define';
|
||||
import '@mdjs/mdjs-story/mdjs-story.js';
|
||||
import '@mdjs/mdjs-preview/mdjs-preview.js';
|
||||
```
|
||||
````
|
||||
|
||||
@@ -118,8 +118,8 @@ export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-w
|
||||
Here is a live example from [demo-wc-card](https://www.npmjs.com/package/demo-wc-card).
|
||||
|
||||
```js script
|
||||
import '@mdjs/mdjs-story/define';
|
||||
import '@mdjs/mdjs-preview/define';
|
||||
import '@mdjs/mdjs-story/mdjs-story.js';
|
||||
import '@mdjs/mdjs-preview/mdjs-preview.js';
|
||||
import { html } from 'lit-html';
|
||||
```
|
||||
|
||||
|
||||
@@ -2,165 +2,22 @@
|
||||
|
||||
You can showcase live running code by annotating a code block with `js preview-story`.
|
||||
|
||||
## Features
|
||||
|
||||
- Shows components inside the page as they are
|
||||
- You can enable “Simulation Mode” to break them out
|
||||
- Simulation mode renders in an iframe to supporting media queries and isolated Simulation settings
|
||||
- Simulation Settings
|
||||
- Style (windows, mac, android, iOS)
|
||||
- Size (small, medium, large, Galaxy S5, iPhone X, iPad …)
|
||||
- Automatic Height
|
||||
- Theme (light, dark)
|
||||
- Language (en, nl, …)
|
||||
- Settings are ”global” for all Simulators (e.g. changing one will change all)
|
||||
- Settings can be remembered for other pages / return visits
|
||||
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
import './assets/demo-element.js';
|
||||
```
|
||||
|
||||
## JavaScript Story
|
||||
|
||||
````md
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
import './assets/demo-element.js';
|
||||
```
|
||||
|
||||
```js preview-story
|
||||
export const foo = () => html`<demo-element></demo-element>`;
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
````
|
||||
|
||||
will result in
|
||||
|
||||
```js preview-story
|
||||
export const foo = () => html` <demo-element></demo-element> `;
|
||||
```
|
||||
|
||||
## HTML Story
|
||||
|
||||
````md
|
||||
```html preview-story
|
||||
<demo-element></demo-element>
|
||||
```
|
||||
````
|
||||
|
||||
will result in
|
||||
|
||||
```html preview-story
|
||||
<demo-element></demo-element>
|
||||
```
|
||||
|
||||
## Setup Simulation Mode
|
||||
|
||||
For simulation mode we need a dedicated html file that will be used as an iframe target while loading stories.
|
||||
|
||||
The fastest way to create such a file is to use the `layout-simulator` layout.
|
||||
|
||||
Create a file `docs/simulator.md` with the following content.
|
||||
|
||||
```md
|
||||
---
|
||||
layout: layout-simulator
|
||||
eleventyExcludeFromCollections: true
|
||||
excludeFromSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
setupUnifiedPlugins: [
|
||||
adjustPluginOptions('mdjsSetupCode', {
|
||||
simulationSettings: { simulatorUrl: '/simulator/' },
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
<inline-notification type="tip">
|
||||
|
||||
You can freely choose the path for the "simulator" by creating the md file in a different folder and adjusting the path in the config.
|
||||
|
||||
</inline-notification>
|
||||
|
||||
## Simulator states
|
||||
|
||||
To simulate these stats that usually come from the device itself we put those infos on the document tag.
|
||||
|
||||
We can simulate the following settings
|
||||
|
||||
1. `platform`
|
||||
Adopting styles and behavior depending on which device platform you are.
|
||||
```html
|
||||
<html platform="web"></html>
|
||||
<html platform="android"></html>
|
||||
<html platform="ios"></html>
|
||||
<!-- potentially later -->
|
||||
<html platform="web-windows"></html>
|
||||
<html platform="web-mac"></html>
|
||||
```
|
||||
2. `theme`
|
||||
Adjust your styles based on a theme - light/dark are the default but you can add as many as you want.
|
||||
```html
|
||||
<html theme="light"></html>
|
||||
<html theme="dark"></html>
|
||||
```
|
||||
3. `language`
|
||||
Best to relay on `data-lang` and `lang` often gets changes by translations services which may interfere with you translation loading system.
|
||||
```html
|
||||
<html lang="en-US" data-lang="en-US"></html>
|
||||
<html lang="de-DE" data-lang="de-DE"></html>
|
||||
```
|
||||
|
||||
If you want to react to such document changes you can use an [MutationObserver](https://developer.mozilla.org/de/docs/Web/API/MutationObserver).
|
||||
|
||||
For a vanilla web component it could look something like this:
|
||||
|
||||
```js
|
||||
class DemoElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.platform = 'the web';
|
||||
this.language = 'en-US';
|
||||
this.theme = 'light';
|
||||
|
||||
this.observer = new MutationObserver(this.updateData);
|
||||
}
|
||||
|
||||
updateData = () => {
|
||||
this.platform = document.documentElement.getAttribute('platform') || 'the web';
|
||||
this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
|
||||
this.theme = document.documentElement.getAttribute('theme') || 'light';
|
||||
this.requestUpdate();
|
||||
};
|
||||
|
||||
connectedCallback() {
|
||||
this.updateData();
|
||||
|
||||
this.observer.observe(document.documentElement, { attributes: true });
|
||||
}
|
||||
|
||||
requestUpdate() {
|
||||
this.shadowRoot.innerHTML = this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
...
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-element', DemoElement);
|
||||
```
|
||||
|
||||
```js script
|
||||
import '@rocket/launch/inline-notification/inline-notification.js';
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
|
||||
3
docs/playground.md
Normal file
3
docs/playground.md
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
layout: layout-playground
|
||||
---
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
layout: layout-simulator
|
||||
eleventyExcludeFromCollections: true
|
||||
excludeFromSearch: true
|
||||
---
|
||||
@@ -1,11 +1,5 @@
|
||||
# @rocket/building-rollup
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- bad4686: Preserve attributes on script tags. Preserve export names.
|
||||
|
||||
## 0.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/building-rollup",
|
||||
"version": "0.2.0",
|
||||
"version": "0.1.3",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -13,8 +13,8 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/docs/tools/building-rollup/",
|
||||
"main": "./index.js",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"exports": {
|
||||
".": "./index.js"
|
||||
},
|
||||
@@ -55,9 +55,9 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@rollup/plugin-babel": "^5.2.2",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
"@web/rollup-plugin-html": "^1.6.0",
|
||||
"@web/rollup-plugin-html": "^1.4.0",
|
||||
"@web/rollup-plugin-import-meta-assets": "^1.0.4",
|
||||
"@web/rollup-plugin-polyfills-loader": "^1.1.0",
|
||||
"@web/rollup-plugin-polyfills-loader": "^1.0.3",
|
||||
"browserslist": "^4.16.1",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-workbox": "^6.1.0"
|
||||
|
||||
@@ -22,7 +22,7 @@ export function createBasicMetaConfig(userConfig = { output: {} }) {
|
||||
const assetName = `[${developmentMode ? 'name' : 'hash'}][extname]`;
|
||||
|
||||
const config = {
|
||||
preserveEntrySignatures: 'strict',
|
||||
preserveEntrySignatures: false,
|
||||
treeshake: !developmentMode,
|
||||
setupPlugins: [],
|
||||
...userConfig,
|
||||
|
||||
@@ -75,14 +75,6 @@ describe('createMapConfig', () => {
|
||||
'<h1>Has js in sub-js/index.html</h1>\n\n\n<script type="module" src="../sub-js.js"></script>',
|
||||
);
|
||||
|
||||
const subJsAbsoluteIndexHtml = await readOutput('sub-js-absolute/index.html', {
|
||||
stripToBody: true,
|
||||
stripServiceWorker: true,
|
||||
});
|
||||
expect(subJsAbsoluteIndexHtml).to.equal(
|
||||
'<h1>Has js in sub-js-absolute/index.html</h1>\n\n\n<script type="module" src="../sub-js-absolute.js"></script>',
|
||||
);
|
||||
|
||||
const serviceWorkerJs = await readOutput('service-worker.js');
|
||||
expect(serviceWorkerJs).to.include('Promise'); // not empty string might be enough...
|
||||
});
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
<h1>Has js in sub-js-absolute/index.html</h1>
|
||||
<script type="module" src="/sub-js-absolute/sub-js-absolute.js"></script>
|
||||
@@ -13,11 +13,11 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/docs/tools/check-html-links/",
|
||||
"main": "./index.js",
|
||||
"bin": {
|
||||
"check-html-links": "src/cli.js"
|
||||
},
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"exports": {
|
||||
".": "./index.js"
|
||||
},
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
# @rocket/cli
|
||||
|
||||
## 0.6.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- ed86ff2: Do not set `data-localize-lang` in the simulator iframe html tag
|
||||
- f4a0ab5: Pass document shadowRoot to iframe
|
||||
- c675820: fix: windows path issue avoid filtering of index section of collections
|
||||
|
||||
## 0.6.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- abc8a02: You can now use an absolute path for the rootDir
|
||||
- Updated dependencies [bad4686]
|
||||
- Updated dependencies [2267e72]
|
||||
- @rocket/building-rollup@0.2.0
|
||||
- @rocket/eleventy-plugin-mdjs-unified@0.4.0
|
||||
|
||||
## 0.6.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/cli",
|
||||
"version": "0.6.2",
|
||||
"version": "0.6.0",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -13,11 +13,11 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/",
|
||||
"main": "./index.cjs",
|
||||
"bin": {
|
||||
"rocket": "src/cli.js"
|
||||
},
|
||||
"type": "module",
|
||||
"main": "./index.cjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./index.cjs",
|
||||
@@ -57,9 +57,9 @@
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^0.11.1",
|
||||
"@11ty/eleventy-img": "^0.7.4",
|
||||
"@rocket/building-rollup": "^0.2.0",
|
||||
"@rocket/building-rollup": "^0.1.3",
|
||||
"@rocket/core": "^0.1.2",
|
||||
"@rocket/eleventy-plugin-mdjs-unified": "^0.4.0",
|
||||
"@rocket/eleventy-plugin-mdjs-unified": "^0.3.1",
|
||||
"@rocket/eleventy-rocket-nav": "^0.3.0",
|
||||
"@rollup/plugin-babel": "^5.2.2",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
@@ -73,7 +73,6 @@
|
||||
"fs-extra": "^9.0.1",
|
||||
"micromatch": "^4.0.2",
|
||||
"plugins-manager": "^0.2.1",
|
||||
"slash": "^3.0.0",
|
||||
"utf8": "^3.0.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
<html theme="light" platform="web" lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
html[edge-distance] body {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
import { render } from 'lit-html';
|
||||
|
||||
async function onHashChange() {
|
||||
const urlParts = new URLSearchParams(document.location.hash.substr(1));
|
||||
|
||||
if (urlParts.get('stylesheets')) {
|
||||
for (const stylesheet of urlParts.getAll('stylesheets')) {
|
||||
if (!document.querySelector(`link[rel="stylesheet"][href="${stylesheet}"]`)) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = stylesheet;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (urlParts.get('theme')) {
|
||||
document.documentElement.setAttribute('theme', urlParts.get('theme'));
|
||||
}
|
||||
if (urlParts.get('platform')) {
|
||||
document.documentElement.setAttribute('platform', urlParts.get('platform'));
|
||||
}
|
||||
if (urlParts.get('language')) {
|
||||
document.documentElement.setAttribute('lang', urlParts.get('language'));
|
||||
document.documentElement.setAttribute('data-lang', urlParts.get('language'));
|
||||
}
|
||||
if (urlParts.get('story-key')) {
|
||||
document.documentElement.setAttribute('story-key', urlParts.get('story-key'));
|
||||
}
|
||||
if (urlParts.get('edge-distance') === 'true') {
|
||||
document.documentElement.setAttribute('edge-distance', '');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('edge-distance');
|
||||
}
|
||||
|
||||
const mod = await import(urlParts.get('story-file'));
|
||||
render(mod[urlParts.get('story-key')]({ shadowRoot: document }), document.body);
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', onHashChange, false);
|
||||
onHashChange();
|
||||
|
||||
const observer = new ResizeObserver(() => {
|
||||
const dimensions = document.body.getBoundingClientRect();
|
||||
const data = {
|
||||
action: 'mdjs-viewer-resize',
|
||||
storyKey: document.documentElement.getAttribute('story-key'),
|
||||
width: dimensions.width,
|
||||
height: dimensions.height,
|
||||
};
|
||||
parent.postMessage(JSON.stringify(data), '*');
|
||||
});
|
||||
observer.observe(document.body);
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@@ -3,7 +3,6 @@
|
||||
|
||||
import { rollup } from 'rollup';
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import { copy } from '@web/rollup-plugin-copy';
|
||||
|
||||
import { createMpaConfig } from '@rocket/building-rollup';
|
||||
@@ -46,7 +45,7 @@ async function productionBuild(config) {
|
||||
dir: config.outputDir,
|
||||
},
|
||||
// custom
|
||||
rootDir: path.resolve(config.outputDevDir),
|
||||
rootDir: config.outputDevDir,
|
||||
absoluteBaseUrl: config.absoluteBaseUrl,
|
||||
setupPlugins: [
|
||||
...defaultSetupPlugins,
|
||||
|
||||
@@ -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,6 +1,5 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const slash = require('slash');
|
||||
const { readdirSync } = require('fs');
|
||||
|
||||
function getDirectories(source) {
|
||||
@@ -24,7 +23,7 @@ const rocketCollections = {
|
||||
let docs = [
|
||||
...collection.getFilteredByGlob(`${_inputDirCwdRelative}/${section}/**/*.md`),
|
||||
];
|
||||
docs = docs.filter(page => page.inputPath !== `./${slash(indexSection)}`);
|
||||
docs = docs.filter(page => page.inputPath !== `./${indexSection}`);
|
||||
|
||||
return docs;
|
||||
});
|
||||
|
||||
@@ -34,7 +34,12 @@ describe('RocketCli use cases', () => {
|
||||
expect(aboutHtml).to.equal(
|
||||
[
|
||||
'<p><code>about.md</code></p>',
|
||||
'<script type="module" src="/about/__mdjs-stories.js" mdjs-setup></script>',
|
||||
'<script type="module">',
|
||||
' import { myData } from "../sub/assets/myData.js";',
|
||||
' import("../sub/assets/myData.js");',
|
||||
' const name = "myData";',
|
||||
' import(`../sub/assets/${name}.js`);',
|
||||
'</script>',
|
||||
].join('\n'),
|
||||
);
|
||||
|
||||
@@ -42,7 +47,12 @@ describe('RocketCli use cases', () => {
|
||||
expect(subHtml).to.equal(
|
||||
[
|
||||
'<p><code>sub/index.md</code></p>',
|
||||
'<script type="module" src="/sub/__mdjs-stories.js" mdjs-setup></script>',
|
||||
'<script type="module">',
|
||||
' import { myData } from "./assets/myData.js";',
|
||||
' import("./assets/myData.js");',
|
||||
' const name = "myData";',
|
||||
' import(`./assets/${name}.js`);',
|
||||
'</script>',
|
||||
].join('\n'),
|
||||
);
|
||||
|
||||
@@ -52,7 +62,12 @@ describe('RocketCli use cases', () => {
|
||||
expect(subDetailsHtml).to.equal(
|
||||
[
|
||||
'<p><code>sub/details.md</code></p>',
|
||||
'<script type="module" src="/sub/details/__mdjs-stories.js" mdjs-setup></script>',
|
||||
'<script type="module">',
|
||||
' import { myData } from "../assets/myData.js";',
|
||||
' import("../assets/myData.js");',
|
||||
' const name = "myData";',
|
||||
' import(`../assets/${name}.js`);',
|
||||
'</script>',
|
||||
].join('\n'),
|
||||
);
|
||||
|
||||
@@ -60,7 +75,12 @@ describe('RocketCli use cases', () => {
|
||||
expect(indexHtml).to.equal(
|
||||
[
|
||||
'<p><code>index.md</code></p>',
|
||||
'<script type="module" src="/__mdjs-stories.js" mdjs-setup></script>',
|
||||
'<script type="module">',
|
||||
' import { myData } from "./sub/assets/myData.js";',
|
||||
' import("./sub/assets/myData.js");',
|
||||
' const name = "myData";',
|
||||
' import(`./sub/assets/${name}.js`);',
|
||||
'</script>',
|
||||
].join('\n'),
|
||||
);
|
||||
});
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/",
|
||||
"main": "./dist/title.cjs",
|
||||
"type": "module",
|
||||
"main": "./dist/title.cjs",
|
||||
"exports": {
|
||||
"./title": {
|
||||
"require": "./dist/title.cjs",
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
# @rocket/drawer
|
||||
|
||||
## 0.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 0b64116: Update @lion dependencies
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/drawer",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -33,7 +33,7 @@
|
||||
"testing"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/overlays": "^0.26.1",
|
||||
"@lion/overlays": "^0.23.2",
|
||||
"lit-element": "^2.4.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
|
||||
@@ -1,18 +1,5 @@
|
||||
# @rocket/eleventy-plugin-mdjs-unified
|
||||
|
||||
## 0.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 2267e72: Write the mdjs JavaScript code to a file and load it from there instead of an inline script
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a8e66d8]
|
||||
- Updated dependencies [fe6a929]
|
||||
- Updated dependencies [a8e66d8]
|
||||
- @mdjs/core@0.7.0
|
||||
|
||||
## 0.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/eleventy-plugin-mdjs-unified",
|
||||
"version": "0.4.0",
|
||||
"version": "0.3.1",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -31,7 +31,7 @@
|
||||
"mdjs"
|
||||
],
|
||||
"dependencies": {
|
||||
"@mdjs/core": "^0.7.0",
|
||||
"@mdjs/core": "^0.6.2",
|
||||
"es-module-lexer": "^0.3.26",
|
||||
"unist-util-visit": "^2.0.3"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { mdjsProcess } = require('@mdjs/core');
|
||||
const visit = require('unist-util-visit');
|
||||
const { init, parse } = require('es-module-lexer');
|
||||
@@ -9,7 +7,7 @@ const { init, parse } = require('es-module-lexer');
|
||||
const { parseTitle } = require('@rocket/core/title');
|
||||
|
||||
/** @typedef {import('@mdjs/core').MdjsProcessPlugin} MdjsProcessPlugin */
|
||||
/** @typedef {import('../types/code').EleventyPluginMdjsUnified} EleventyPluginMdjsUnified */
|
||||
/** @typedef {import('../types/code').EleventPluginMdjsUnified} EleventPluginMdjsUnified */
|
||||
/** @typedef {import('../types/code').NodeChildren} NodeChildren */
|
||||
/** @typedef {import('../types/code').NodeElement} NodeElement */
|
||||
/** @typedef {import('unist').Node} Node */
|
||||
@@ -95,7 +93,7 @@ async function processImports(source, inputPath) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {EleventyPluginMdjsUnified} pluginOptions
|
||||
* @param {EleventPluginMdjsUnified} pluginOptions
|
||||
*/
|
||||
function eleventyUnified(pluginOptions) {
|
||||
/**
|
||||
@@ -141,12 +139,10 @@ function eleventyUnified(pluginOptions) {
|
||||
|
||||
let code = result.html;
|
||||
if (result.jsCode) {
|
||||
const newFolder = path.dirname(eleventySettings.page.outputPath);
|
||||
const newName = path.join(newFolder, '__mdjs-stories.js');
|
||||
await fs.promises.mkdir(newFolder, { recursive: true });
|
||||
await fs.promises.writeFile(newName, result.jsCode, 'utf8');
|
||||
code += `
|
||||
<script type="module" src="${eleventySettings.page.url}__mdjs-stories.js" mdjs-setup></script>
|
||||
<script type="module">
|
||||
${result.jsCode}
|
||||
</script>
|
||||
`;
|
||||
}
|
||||
return code;
|
||||
@@ -161,15 +157,15 @@ function eleventyUnified(pluginOptions) {
|
||||
|
||||
/**
|
||||
* @param {*} eleventyConfig
|
||||
* @param {EleventyPluginMdjsUnified} [pluginOptions]
|
||||
* @param {EleventPluginMdjsUnified} [pluginOptions]
|
||||
*/
|
||||
function configFunction(eleventyConfig, pluginOptions = {}) {
|
||||
eleventyConfig.setLibrary('md', eleventyUnified(pluginOptions));
|
||||
}
|
||||
|
||||
const EleventyPluginMdjsUnified = {
|
||||
const eleventPluginMdjsUnified = {
|
||||
initArguments: {},
|
||||
configFunction,
|
||||
};
|
||||
|
||||
module.exports = EleventyPluginMdjsUnified;
|
||||
module.exports = eleventPluginMdjsUnified;
|
||||
|
||||
@@ -57,8 +57,8 @@ describe('eleventy-plugin-mdjs-unified', () => {
|
||||
expect(files.length).to.equal(1);
|
||||
expect(files[0].name).to.equal('first/index.html');
|
||||
|
||||
expect(files[0].html).to.include('<script type="module"');
|
||||
expect(files[0].html).to.include('mdjs-setup>');
|
||||
expect(files[0].html).to.include('<script type="module">');
|
||||
expect(files[0].html).to.include('for (const story of stories)');
|
||||
});
|
||||
|
||||
it('rewrites relative import pathes', async () => {
|
||||
@@ -66,7 +66,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
|
||||
expect(files).to.deep.equal([
|
||||
{
|
||||
html:
|
||||
'<p>first</p>\n <script type="module" src="/first/__mdjs-stories.js" mdjs-setup></script>\n ',
|
||||
"<p>first</p>\n <script type=\"module\">\n import '../import-me.js';\nimport('../import-me-too.js');\n </script>\n ",
|
||||
name: 'first/index.html',
|
||||
},
|
||||
]);
|
||||
@@ -77,7 +77,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
|
||||
expect(files).to.deep.equal([
|
||||
{
|
||||
html:
|
||||
'<p>first</p>\n <script type="module" src="/subpage/first/__mdjs-stories.js" mdjs-setup></script>\n ',
|
||||
"<p>first</p>\n <script type=\"module\">\n import '../../import-me.js';\nimport('../../import-me-too.js');\n </script>\n ",
|
||||
name: 'subpage/first/index.html',
|
||||
},
|
||||
]);
|
||||
@@ -88,7 +88,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
|
||||
expect(files).to.deep.equal([
|
||||
{
|
||||
html:
|
||||
'<p>index</p>\n <script type="module" src="/__mdjs-stories.js" mdjs-setup></script>\n ',
|
||||
"<p>index</p>\n <script type=\"module\">\n import './import-me.js';\nimport('./import-me-too.js');\n </script>\n ",
|
||||
name: 'index.html',
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Node } from 'unist';
|
||||
|
||||
export const setupUnifiedPluginsFn: (plugins: MdjsProcessPlugin[]) => MdjsProcessPlugin[];
|
||||
|
||||
export interface EleventyPluginMdjsUnified {
|
||||
export interface EleventPluginMdjsUnified {
|
||||
setupUnifiedPlugins?: setupUnifiedPluginsFn[];
|
||||
}
|
||||
|
||||
|
||||
@@ -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": {
|
||||
@@ -35,7 +36,7 @@
|
||||
"preset"
|
||||
],
|
||||
"dependencies": {
|
||||
"@rocket/drawer": "^0.1.3",
|
||||
"@rocket/drawer": "^0.1.2",
|
||||
"@rocket/navigation": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,5 @@
|
||||
# Change Log
|
||||
|
||||
## 0.7.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- a8e66d8: Extract building of the JavaScript setup code into a unified plugin called mdjsSetupCode
|
||||
- fe6a929: For the story preview keep the original code block around to get code highlighting from the main document. This enables styling and reduces the code complexity.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- a8e66d8: You can provide a highlightCode function to the mdjsSetupCode unified plugin
|
||||
- Updated dependencies [edb1abf]
|
||||
- Updated dependencies [604a80e]
|
||||
- @mdjs/mdjs-preview@0.4.0
|
||||
- @mdjs/mdjs-story@0.2.0
|
||||
|
||||
## 0.6.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mdjs/core",
|
||||
"version": "0.7.0",
|
||||
"version": "0.6.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -43,8 +43,8 @@
|
||||
"remark"
|
||||
],
|
||||
"dependencies": {
|
||||
"@mdjs/mdjs-preview": "^0.4.0",
|
||||
"@mdjs/mdjs-story": "^0.2.0",
|
||||
"@mdjs/mdjs-preview": "^0.3.2",
|
||||
"@mdjs/mdjs-story": "^0.1.2",
|
||||
"@types/unist": "^2.0.3",
|
||||
"es-module-lexer": "^0.3.26",
|
||||
"github-markdown-css": "^4.0.0",
|
||||
|
||||
@@ -2,7 +2,10 @@
|
||||
/** @typedef {import('unist').Node} Node */
|
||||
/** @typedef {import('@mdjs/core/types/code').Story} Story */
|
||||
|
||||
function mdjsSetupCode({ rootNodeQueryCode = 'document', simulationSettings = {} } = {}) {
|
||||
function mdjsSetupCode({
|
||||
rootNodeQueryCode = 'document',
|
||||
highlightCode = /** @param {string} code */ code => code,
|
||||
} = {}) {
|
||||
/**
|
||||
* @param {Node} tree
|
||||
* @param {VFileOptions} file
|
||||
@@ -17,32 +20,40 @@ function mdjsSetupCode({ rootNodeQueryCode = 'document', simulationSettings = {}
|
||||
|
||||
const invokeStoriesCode = [];
|
||||
for (const story of stories) {
|
||||
invokeStoriesCode.push(`{ key: '${story.key}', story: ${story.key} }`);
|
||||
let code = '';
|
||||
switch (story.type) {
|
||||
case 'html':
|
||||
code = `\`\`\`html\n${story.code.split('`')[1]}\n\`\`\``;
|
||||
break;
|
||||
case 'js':
|
||||
code = `\`\`\`js\n${story.code}\n\`\`\``;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
let highlightedCode = await highlightCode(code);
|
||||
highlightedCode = highlightedCode.replace(/`/g, '\\`').replace(/\$/g, '\\$');
|
||||
invokeStoriesCode.push(
|
||||
`{ key: '${story.key}', story: ${story.key}, code: \`${highlightedCode}\` }`,
|
||||
);
|
||||
}
|
||||
|
||||
file.data.setupJsCode = [
|
||||
'/** script code **/',
|
||||
jsCode,
|
||||
'/** stories code **/',
|
||||
storiesCode,
|
||||
'/** stories setup code **/',
|
||||
`const rootNode = ${rootNodeQueryCode};`,
|
||||
`const stories = [${invokeStoriesCode.join(', ')}];`,
|
||||
'let needsMdjsElements = false;',
|
||||
`for (const story of stories) {`,
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
' const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
|
||||
' if (storyEl) {',
|
||||
` storyEl.story = story.story;`,
|
||||
` storyEl.key = story.key;`,
|
||||
` needsMdjsElements = true;`,
|
||||
` Object.assign(storyEl, ${JSON.stringify(simulationSettings)});`,
|
||||
' }',
|
||||
` storyEl.codeHasHtml = true;`,
|
||||
` storyEl.story = story.story;`,
|
||||
` storyEl.code = story.code;`,
|
||||
` storyEl.jsCode = \`${jsCode.replace(/`/g, '\\`')}\`;`,
|
||||
`};`,
|
||||
'if (needsMdjsElements) {',
|
||||
` if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
|
||||
` if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
|
||||
'}',
|
||||
`if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
|
||||
`if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
/** @typedef {import('@mdjs/core/types/code').StoryTypes} StoryTypes */
|
||||
/** @typedef {(name: string) => string} TagFunction */
|
||||
/** @typedef {import('unist').Node} UnistNode */
|
||||
/** @typedef {import('unist').Parent} UnistParent */
|
||||
/** @typedef {import('vfile').VFileOptions} VFileOptions */
|
||||
|
||||
const visit = require('unist-util-visit');
|
||||
@@ -41,7 +40,7 @@ function defaultStoryTag(name) {
|
||||
* @param {string} name
|
||||
*/
|
||||
function defaultPreviewStoryTag(name) {
|
||||
return `<mdjs-preview mdjs-story-name="${name}">[[CODE SLOT]]</mdjs-preview>`;
|
||||
return `<mdjs-preview mdjs-story-name="${name}"></mdjs-preview>`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -56,16 +55,14 @@ function mdjsStoryParse({
|
||||
} = {}) {
|
||||
/** @type {Story[]} */
|
||||
const stories = [];
|
||||
let htmlIndex = 0;
|
||||
let index = 0;
|
||||
|
||||
/* eslint-disable no-param-reassign */
|
||||
|
||||
/**
|
||||
* @param {UnistNode} node
|
||||
* @param {number} index
|
||||
* @param {UnistParent} parent
|
||||
*/
|
||||
const nodeCodeVisitor = (node, index, parent) => {
|
||||
const nodeCodeVisitor = node => {
|
||||
if (node.lang === 'js' && node.meta === 'story' && typeof node.value === 'string') {
|
||||
const storyData = extractStoryData(node.value);
|
||||
node.type = 'html';
|
||||
@@ -74,65 +71,30 @@ function mdjsStoryParse({
|
||||
}
|
||||
if (node.lang === 'js' && node.meta === 'preview-story' && typeof node.value === 'string') {
|
||||
const storyData = extractStoryData(node.value);
|
||||
const newValue = previewStoryTag(storyData.name);
|
||||
if (newValue.includes('[[CODE SLOT]]')) {
|
||||
const tagParts = newValue.split('[[CODE SLOT]]');
|
||||
node = {
|
||||
type: 'root',
|
||||
children: [
|
||||
{ type: 'html', value: tagParts[0] },
|
||||
{ type: 'text', value: '\n\n' },
|
||||
node,
|
||||
{ type: 'text', value: '\n\n' },
|
||||
{ type: 'html', value: tagParts[1] },
|
||||
],
|
||||
};
|
||||
parent.children.splice(index, 1, node);
|
||||
} else {
|
||||
node.type = 'html';
|
||||
node.value = previewStoryTag(storyData.name);
|
||||
}
|
||||
|
||||
node.type = 'html';
|
||||
node.value = previewStoryTag(storyData.name);
|
||||
stories.push(storyData);
|
||||
}
|
||||
|
||||
if (node.lang === 'html' && node.meta === 'story') {
|
||||
const storyData = extractStoryData(
|
||||
`export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
||||
`export const HtmlStory${index} = () => html\`${node.value}\`;`,
|
||||
{ type: 'html' },
|
||||
);
|
||||
node.type = 'html';
|
||||
node.value = storyTag(storyData.name);
|
||||
stories.push(storyData);
|
||||
htmlIndex += 1;
|
||||
index += 1;
|
||||
}
|
||||
if (node.lang === 'html' && node.meta === 'preview-story') {
|
||||
const storyData = extractStoryData(
|
||||
`export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
|
||||
`export const HtmlStory${index} = () => html\`${node.value}\`;`,
|
||||
{ type: 'html' },
|
||||
);
|
||||
|
||||
const newValue = previewStoryTag(storyData.name);
|
||||
if (newValue.includes('[[CODE SLOT]]')) {
|
||||
const tagParts = newValue.split('[[CODE SLOT]]');
|
||||
node = {
|
||||
type: 'root',
|
||||
children: [
|
||||
{ type: 'html', value: tagParts[0] },
|
||||
{ type: 'text', value: '\n\n' },
|
||||
node,
|
||||
{ type: 'text', value: '\n\n' },
|
||||
{ type: 'html', value: tagParts[1] },
|
||||
],
|
||||
};
|
||||
parent.children.splice(index, 1, node);
|
||||
} else {
|
||||
node.type = 'html';
|
||||
node.value = previewStoryTag(storyData.name);
|
||||
}
|
||||
|
||||
node.type = 'html';
|
||||
node.value = previewStoryTag(storyData.name);
|
||||
stories.push(storyData);
|
||||
htmlIndex += 1;
|
||||
index += 1;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -45,16 +45,7 @@ describe('Integration', () => {
|
||||
'<pre><code class="language-js">const foo = 1;',
|
||||
'</code></pre>',
|
||||
'<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory">',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'<pre><code class="language-js">export const fooPreviewStory = () => {}',
|
||||
'</code></pre>',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'</mdjs-preview>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
|
||||
];
|
||||
|
||||
const parser = unified()
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
|
||||
const chai = require('chai');
|
||||
const { adjustPluginOptions } = require('plugins-manager');
|
||||
const { mdjsProcess } = require('../src/mdjsProcess.js');
|
||||
|
||||
const { expect } = chai;
|
||||
@@ -29,40 +28,25 @@ describe('mdjsProcess', () => {
|
||||
'<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>',
|
||||
'</code></pre>',
|
||||
'<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory">',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>',
|
||||
'</code></pre>',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'</mdjs-preview>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
|
||||
].join('\n');
|
||||
const expectedJsCode = [
|
||||
'/** script code **/',
|
||||
'const bar = 2;',
|
||||
'/** stories code **/',
|
||||
'export const fooStory = () => {}',
|
||||
'export const fooPreviewStory = () => {}',
|
||||
'/** stories setup code **/',
|
||||
'const rootNode = document;',
|
||||
`const stories = [{ key: 'fooStory', story: fooStory }, { key: 'fooPreviewStory', story: fooPreviewStory }];`,
|
||||
'let needsMdjsElements = false;',
|
||||
`const stories = [{ key: 'fooStory', story: fooStory, code: \`<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>`,
|
||||
`</code></pre>\` }, { key: 'fooPreviewStory', story: fooPreviewStory, code: \`<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>`,
|
||||
`</code></pre>\` }];`,
|
||||
'for (const story of stories) {',
|
||||
' const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
|
||||
' if (storyEl) {',
|
||||
' storyEl.story = story.story;',
|
||||
' storyEl.key = story.key;',
|
||||
' needsMdjsElements = true;',
|
||||
' Object.assign(storyEl, {});',
|
||||
' }',
|
||||
' storyEl.codeHasHtml = true;',
|
||||
' storyEl.story = story.story;',
|
||||
' storyEl.code = story.code;',
|
||||
' storyEl.jsCode = `const bar = 2;`;',
|
||||
'};',
|
||||
'if (needsMdjsElements) {',
|
||||
` if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
|
||||
` if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
|
||||
'}',
|
||||
`if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
|
||||
`if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
|
||||
].join('\n');
|
||||
|
||||
const result = await mdjsProcess(input);
|
||||
@@ -168,45 +152,4 @@ describe('mdjsProcess', () => {
|
||||
const result = await mdjsProcess(input);
|
||||
expect(result.html.trim()).to.equal(expected);
|
||||
});
|
||||
|
||||
it('can adjust languages for story preview', async () => {
|
||||
const input = [
|
||||
'Intro',
|
||||
'```js preview-story',
|
||||
'export const fooPreviewStory = () => {}',
|
||||
'```',
|
||||
].join('\n');
|
||||
|
||||
const expected = [
|
||||
`/** script code **/`,
|
||||
``,
|
||||
`/** stories code **/`,
|
||||
`export const fooPreviewStory = () => {}`,
|
||||
`/** stories setup code **/`,
|
||||
`const rootNode = document;`,
|
||||
`const stories = [{ key: 'fooPreviewStory', story: fooPreviewStory }];`,
|
||||
`let needsMdjsElements = false;`,
|
||||
`for (const story of stories) {`,
|
||||
' const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
|
||||
` if (storyEl) {`,
|
||||
` storyEl.story = story.story;`,
|
||||
` storyEl.key = story.key;`,
|
||||
` needsMdjsElements = true;`,
|
||||
' Object.assign(storyEl, {"languages":[{"key":"en","name":"English"}]});',
|
||||
` }`,
|
||||
`};`,
|
||||
`if (needsMdjsElements) {`,
|
||||
` if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
|
||||
` if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
|
||||
`}`,
|
||||
].join('\n');
|
||||
const result = await mdjsProcess(input, {
|
||||
setupUnifiedPlugins: [
|
||||
adjustPluginOptions('mdjsSetupCode', {
|
||||
simulationSettings: { languages: [{ key: 'en', name: 'English' }] },
|
||||
}),
|
||||
],
|
||||
});
|
||||
expect(result.jsCode.trim()).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,27 +37,9 @@ describe('mdjsStoryParse', () => {
|
||||
'<pre><code class="language-js">const foo = 1;',
|
||||
'</code></pre>',
|
||||
'<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory">',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'<pre><code class="language-js">export const fooPreviewStory = () => {}',
|
||||
'</code></pre>',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'</mdjs-preview>',
|
||||
'<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
|
||||
'<mdjs-story mdjs-story-name="HtmlStory0"></mdjs-story>',
|
||||
'<mdjs-preview mdjs-story-name="HtmlStory1">',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'<pre><code class="language-html"><demo-el></demo-el>',
|
||||
'</code></pre>',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'</mdjs-preview>',
|
||||
'<mdjs-preview mdjs-story-name="HtmlStory1"></mdjs-preview>',
|
||||
'',
|
||||
].join('\n');
|
||||
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
# @mdjs/mdjs-preview
|
||||
|
||||
## 0.4.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 0f6709a: Make sure initial settings are taken from the element if nothing is yet stored
|
||||
|
||||
## 0.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- edb1abf: Reworking completely by
|
||||
|
||||
- slotting in the highlighted code
|
||||
- open story in dedicated window
|
||||
- enabling an simulation mode that can render the story in an iframe
|
||||
- share settings between all simulators
|
||||
- option to remember simulator settings
|
||||
- force side effect import via `/define`
|
||||
|
||||
## 0.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { MdJsPreview } from '../MdJsPreview.js';
|
||||
import { MdJsPreview } from './src/MdJsPreview.js';
|
||||
|
||||
customElements.define('mdjs-preview', MdJsPreview);
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mdjs/mdjs-preview",
|
||||
"version": "0.4.1",
|
||||
"version": "0.3.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -17,7 +17,7 @@
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./index.js",
|
||||
"./define": "./src/define/define.js"
|
||||
"./mdjs-preview.js": "./mdjs-preview.js"
|
||||
},
|
||||
"scripts": {
|
||||
"debug": "cd ../../ && npm run debug -- --group mdjs-preview",
|
||||
@@ -32,8 +32,8 @@
|
||||
"src"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/accordion": "^0.4.2",
|
||||
"lit-element": "^2.4.0"
|
||||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
}
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
import '@lion/accordion/define';
|
||||
|
||||
import {
|
||||
subscribe,
|
||||
unSubscribe,
|
||||
saveToSharedStates,
|
||||
applySharedStates,
|
||||
} from './mdjsViewerSharedStates.js';
|
||||
import { addResizeHandler } from './resizeHandler.js';
|
||||
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
|
||||
|
||||
/**
|
||||
* @typedef {object} StoryOptions
|
||||
@@ -28,731 +20,160 @@ export class MdJsPreview extends LitElement {
|
||||
story: {
|
||||
attribute: false,
|
||||
},
|
||||
key: {
|
||||
code: {
|
||||
type: String,
|
||||
},
|
||||
deviceMode: {
|
||||
codeHasHtml: {
|
||||
type: Boolean,
|
||||
attribute: 'device-mode',
|
||||
},
|
||||
showCode: {
|
||||
type: Boolean,
|
||||
attribute: 'show-code',
|
||||
reflect: true,
|
||||
},
|
||||
sameSettings: { type: Boolean },
|
||||
contentHeight: { type: Number },
|
||||
simulatorUrl: { type: String },
|
||||
// page settings
|
||||
platform: { type: String },
|
||||
platforms: { type: Array },
|
||||
size: { type: String },
|
||||
sizes: { type: Array },
|
||||
theme: { type: String, reflect: true },
|
||||
themes: { type: Array },
|
||||
language: { type: String },
|
||||
languages: { type: Array },
|
||||
edgeDistance: { type: Boolean },
|
||||
autoHeight: { type: Boolean },
|
||||
rememberSettings: { type: Boolean },
|
||||
};
|
||||
}
|
||||
|
||||
toggleShowCode() {
|
||||
this.showCode = !this.showCode;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.code = '';
|
||||
/** @type {LitHtmlStoryFn} */
|
||||
this.story = () => html` <p>Loading...</p> `;
|
||||
this.key = '';
|
||||
this.contentHeight = 0;
|
||||
this.simulatorUrl = '';
|
||||
|
||||
this.theme = 'light';
|
||||
this.themes = [
|
||||
{ key: 'light', name: 'Light' },
|
||||
{ key: 'dark', name: 'Dark' },
|
||||
];
|
||||
|
||||
this.language = 'en-US';
|
||||
this.languages = [
|
||||
{ key: 'en', name: 'English' },
|
||||
{ key: 'en-US', name: 'English (United States)' },
|
||||
{ key: 'en-GB', name: 'English (United Kingdom)' },
|
||||
{ key: 'de', name: 'German' },
|
||||
{ key: 'es', name: 'Spanish' },
|
||||
{ key: 'fi', name: 'Finnish' },
|
||||
{ key: 'fr', name: 'French' },
|
||||
{ key: 'it', name: 'Italian' },
|
||||
{ key: 'nl', name: 'Dutch' },
|
||||
{ key: 'pl', name: 'Polish' },
|
||||
{ key: 'pt', name: 'Portuguese' },
|
||||
{ key: 'ro', name: 'Romanian' },
|
||||
{ key: 'sv', name: 'Swedish' },
|
||||
{ key: 'sv', name: 'Swedish' },
|
||||
];
|
||||
|
||||
this.platform = 'web';
|
||||
this.platforms = [
|
||||
{ key: 'web', name: 'Web' },
|
||||
// { key: 'web-windows', name: 'Windows' },
|
||||
// { key: 'web-mac', name: 'Mac' },
|
||||
{ key: 'android', name: 'Android' },
|
||||
{ key: 'ios', name: 'iOS' },
|
||||
];
|
||||
|
||||
this.size = 'webSmall';
|
||||
this.sizes = [
|
||||
{
|
||||
key: 'webSmall',
|
||||
name: 'Small',
|
||||
platform: 'web',
|
||||
width: 360,
|
||||
height: 640,
|
||||
dpr: 1,
|
||||
},
|
||||
{
|
||||
key: 'webMedium',
|
||||
name: 'Medium',
|
||||
platform: 'web',
|
||||
width: 640,
|
||||
height: 640,
|
||||
dpr: 1,
|
||||
},
|
||||
{
|
||||
key: 'webLarge',
|
||||
name: 'Large',
|
||||
platform: 'web',
|
||||
width: 1024,
|
||||
height: 640,
|
||||
dpr: 1,
|
||||
},
|
||||
{
|
||||
key: 'pixel2',
|
||||
name: 'Pixel 2',
|
||||
platform: 'android',
|
||||
width: 411,
|
||||
height: 731,
|
||||
dpr: 2.6,
|
||||
},
|
||||
{
|
||||
key: 'galaxyS5',
|
||||
name: 'Galaxy S5',
|
||||
platform: 'android',
|
||||
width: 360,
|
||||
height: 640,
|
||||
dpr: 3,
|
||||
},
|
||||
{
|
||||
key: 'iphoneX',
|
||||
name: 'iPhone X',
|
||||
platform: 'ios',
|
||||
width: 375,
|
||||
height: 812,
|
||||
dpr: 3,
|
||||
},
|
||||
{
|
||||
key: 'iPad',
|
||||
name: 'iPad',
|
||||
platform: 'ios',
|
||||
width: 768,
|
||||
height: 1024,
|
||||
dpr: 2,
|
||||
},
|
||||
];
|
||||
|
||||
this.deviceMode = false;
|
||||
this.autoHeight = true;
|
||||
this.edgeDistance = true;
|
||||
this.sameSettings = true;
|
||||
this.rememberSettings = false;
|
||||
|
||||
this.__firstRun = true;
|
||||
this.__syncUp = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (this.sameSettings) {
|
||||
applySharedStates(this);
|
||||
}
|
||||
addResizeHandler();
|
||||
}
|
||||
|
||||
get baseUrl() {
|
||||
return document.location.origin;
|
||||
}
|
||||
|
||||
get deviceHeight() {
|
||||
if (this.autoHeight) {
|
||||
return this.contentHeight + 10;
|
||||
}
|
||||
return this.sizeData?.height || 50;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} platform
|
||||
*/
|
||||
getSizesFor(platform) {
|
||||
return this.sizes.filter(el => el.platform === platform);
|
||||
}
|
||||
|
||||
get sizeData() {
|
||||
return (
|
||||
this.sizes.find(el => el.key === this.size) || { width: 50, height: 50, name: 'default' }
|
||||
);
|
||||
}
|
||||
|
||||
onSubscribe = () => {
|
||||
this.__syncUp = false;
|
||||
applySharedStates(this);
|
||||
this.__syncUp = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {import('lit-element').PropertyValues} changeProps
|
||||
*/
|
||||
update(changeProps) {
|
||||
super.update(changeProps);
|
||||
if (this.sameSettings && this.__syncUp) {
|
||||
saveToSharedStates(this, this.onSubscribe);
|
||||
}
|
||||
|
||||
if (changeProps.has('sameSettings')) {
|
||||
if (this.sameSettings) {
|
||||
subscribe(this.onSubscribe);
|
||||
} else {
|
||||
unSubscribe(this.onSubscribe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.sameSettings) {
|
||||
unSubscribe(this.onSubscribe);
|
||||
}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.__syncUp = true;
|
||||
}
|
||||
|
||||
get iframeUrl() {
|
||||
const mdjsSetupScript = /** @type {HTMLScriptElement} */ (document.querySelector(
|
||||
'script[type=module][mdjs-setup]',
|
||||
));
|
||||
if (!mdjsSetupScript) {
|
||||
throw new Error('Could not find a <script type="module" src="..." mdjs-setup></script>');
|
||||
}
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set('story-file', mdjsSetupScript.src);
|
||||
params.set('story-key', this.key);
|
||||
params.set('theme', this.theme);
|
||||
params.set('platform', this.platform);
|
||||
params.set('language', this.language);
|
||||
params.set('edge-distance', this.edgeDistance.toString());
|
||||
|
||||
const links = /** @type {HTMLLinkElement[]} */ ([
|
||||
...document.querySelectorAll('link[mdjs-use]'),
|
||||
]);
|
||||
for (const link of links) {
|
||||
if (link.href) {
|
||||
params.append('stylesheets', link.href);
|
||||
}
|
||||
}
|
||||
|
||||
return `${this.simulatorUrl}#?${params.toString()}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} platform
|
||||
*/
|
||||
changePlatform(platform) {
|
||||
this.platform = platform;
|
||||
const sizes = this.getSizesFor(this.platform);
|
||||
this.size = sizes[0].key;
|
||||
}
|
||||
|
||||
renderPlatforms() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>Platform</h3>
|
||||
<h4>Platform</h4>
|
||||
<div
|
||||
class="segmented-control"
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.changePlatform(/** @type {HTMLInputElement} */ (ev.target).value);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
${this.platforms.map(
|
||||
platform => html`
|
||||
<label class="${this.platform === platform.key ? 'selected' : ''}">
|
||||
<span>${platform.name}</span>
|
||||
<input
|
||||
type="radio"
|
||||
name="platform"
|
||||
value="${platform.key}"
|
||||
?checked=${this.platform === platform.key}
|
||||
/>
|
||||
</label>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderSizes() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>Viewport</h3>
|
||||
<h4>Size</h4>
|
||||
<div
|
||||
class="segmented-control"
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.size = /** @type {HTMLInputElement} */ (ev.target).value;
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
${this.getSizesFor(this.platform).map(
|
||||
size => html`
|
||||
<label class="${this.size === size.key ? 'selected' : ''}">
|
||||
<span>${size.name}</span>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
value="${size.key}"
|
||||
.checked=${this.size === size.key}
|
||||
/>
|
||||
</label>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
${this.renderAutoHeight()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderThemes() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>Visual</h3>
|
||||
<h4>Theme</h4>
|
||||
<div
|
||||
class="segmented-control"
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.theme = /** @type {HTMLInputElement} */ (ev.target).value;
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
${this.themes.map(
|
||||
theme => html`
|
||||
<label class="${this.theme === theme.key ? 'selected' : ''}">
|
||||
<span>${theme.name}</span>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="${theme.key}"
|
||||
?checked=${this.theme === theme.key}
|
||||
/>
|
||||
</label>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
${this.renderEdgeDistance()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderLanguages() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>Localization</h3>
|
||||
<label>
|
||||
Language
|
||||
<select
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.language = /** @type {HTMLInputElement} */ (ev.target).value;
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
${this.languages.map(
|
||||
language => html`
|
||||
<option value="${language.key}" ?selected=${this.language === language.key}>
|
||||
${language.name}
|
||||
</option>
|
||||
`,
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderEdgeDistance() {
|
||||
return html`
|
||||
<div>
|
||||
<label class="${this.edgeDistance ? 'switch selected' : 'switch'}">
|
||||
Apply distance to edge
|
||||
<span class="switch-button"></span>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.edgeDistance}
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.edgeDistance = /** @type {HTMLInputElement} */ (ev.target).checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderAutoHeight() {
|
||||
return html`
|
||||
<div>
|
||||
<label class="${this.autoHeight ? 'switch selected' : 'switch'}">
|
||||
Fit height to content
|
||||
<span class="switch-button"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.autoHeight}
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.autoHeight = /** @type {HTMLInputElement} */ (ev.target).checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderSameSettings() {
|
||||
return html`
|
||||
<div>
|
||||
<label class="${this.sameSettings ? 'switch selected' : 'switch'}">
|
||||
Same settings for all simulations
|
||||
<span class="switch-button"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.sameSettings}
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.sameSettings = /** @type {HTMLInputElement} */ (ev.target).checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderRememberSettings() {
|
||||
if (!this.sameSettings) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<div>
|
||||
<label class="${this.rememberSettings ? 'switch selected' : 'switch'}">
|
||||
Remember settings
|
||||
<span class="switch-button"></span>
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.rememberSettings}
|
||||
@change=${
|
||||
/** @param {Event} ev */ ev => {
|
||||
if (ev.target) {
|
||||
this.rememberSettings = /** @type {HTMLInputElement} */ (ev.target).checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderSyncSettings() {
|
||||
return html`
|
||||
<div>
|
||||
<h3>Global</h3>
|
||||
${this.renderSameSettings()} ${this.renderRememberSettings()}
|
||||
</div>
|
||||
`;
|
||||
this.codeHasHtml = false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="wrapper">
|
||||
${this.deviceMode === false
|
||||
? html`<div>${this.story({ shadowRoot: this.shadowRoot })}</div>`
|
||||
: html`
|
||||
<iframe
|
||||
csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
|
||||
.src=${this.iframeUrl}
|
||||
style=${`width: ${this.sizeData.width}px; height: ${this.deviceHeight}px;`}
|
||||
></iframe>
|
||||
<p class="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
|
||||
${this.sizeData.name} - ${this.deviceHeight}x${this.sizeData.width}
|
||||
</p>
|
||||
`}
|
||||
<div>${this.story({ shadowRoot: this.shadowRoot })}</div>
|
||||
<button id="showCodeButton" @click=${this.toggleShowCode}>show code</button>
|
||||
</div>
|
||||
<lion-accordion class="options">
|
||||
${this.deviceMode
|
||||
? html`
|
||||
<h3 slot="invoker">
|
||||
<button>Settings</button>
|
||||
</h3>
|
||||
<div slot="content">
|
||||
<div class="settings-wrapper">
|
||||
${this.renderPlatforms()} ${this.renderSizes()} ${this.renderThemes()}
|
||||
${this.renderLanguages()} ${this.renderSyncSettings()}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
<h3 slot="invoker">
|
||||
<button>Code</button>
|
||||
</h3>
|
||||
<div slot="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</lion-accordion>
|
||||
${this.simulatorUrl
|
||||
? html`
|
||||
<div class="controls">
|
||||
<a href=${this.iframeUrl} target="_blank">Open simulation in new window</a>
|
||||
<button
|
||||
@click=${() => (this.deviceMode = !this.deviceMode)}
|
||||
class="simulation-toggle"
|
||||
>
|
||||
${this.deviceMode ? html`Disable` : html`Enable`} device simulation
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${this.codeHasHtml ? unsafeHTML(this.code) : html`<pre><code>${this.code}</code></pre>`}
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
border: 1px solid #ccc;
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 2px solid #4caf50;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.switch:focus-within .switch-button {
|
||||
box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 40%), 0 0 0 4px rgb(31 117 203 / 48%);
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
background: grey;
|
||||
height: 25px;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.switch-button::after {
|
||||
content: ' ';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
display: block;
|
||||
#showCodeButton {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.switch.selected .switch-button {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.switch.selected .switch-button::after {
|
||||
left: auto;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.frame-description {
|
||||
margin: -5px 0 10px 0;
|
||||
text-align: right;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
line-height: 20px;
|
||||
color: #24292e;
|
||||
background-color: #eff3f6;
|
||||
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-repeat: repeat-x;
|
||||
background-position: -1px -1px;
|
||||
background-size: 110% 110%;
|
||||
border: 1px solid rgba(27, 31, 35, 0.2);
|
||||
border-radius: 0.25em;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.settings-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 20px 40px;
|
||||
max-width: 650px;
|
||||
#showCodeButton:hover {
|
||||
background-color: #e6ebf1;
|
||||
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
|
||||
background-position: -0.5em;
|
||||
border-color: rgba(27, 31, 35, 0.35);
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.settings-wrapper {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-wrapper h3 {
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.controls a {
|
||||
color: #3f51b5;
|
||||
font-size: 14px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
.simulation-toggle {
|
||||
border: 1px solid #3f51b5;
|
||||
border-radius: 9px;
|
||||
padding: 10px;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
color: #3f51b5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.simulation-toggle:hover {
|
||||
background-color: #3f51b5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h3[slot='invoker'] button {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
#wrapper {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #bbb;
|
||||
width: 100%;
|
||||
background: none;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3[slot='invoker'] button::after {
|
||||
content: '>';
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
h3[slot='invoker'][expanded='true'] button::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
h3[slot='invoker'][expanded='true'] button {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[slot='content'] {
|
||||
border-bottom: 1px solid #bbb;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h3[slot='invoker']:first-child button {
|
||||
border-top: 1px solid #bbb;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
border: 1px solid #3f51b5;
|
||||
border-radius: 18px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.segmented-control span {
|
||||
padding: 5px 10px;
|
||||
display: inline-block;
|
||||
border-radius: 18px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.segmented-control label:first-child span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.segmented-control label:last-child span {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.segmented-control label.selected span {
|
||||
background: #3f51b5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control label:focus-within span {
|
||||
box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 40%), 0 0 0 4px rgb(31 117 203 / 48%);
|
||||
}
|
||||
|
||||
.segmented-control input,
|
||||
.switch input {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
select {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
border: 1px solid #333;
|
||||
:host > pre {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:host([show-code]) > pre {
|
||||
display: block;
|
||||
}
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #393a34;
|
||||
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.selector,
|
||||
.language-autohotkey .token.keyword {
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.symbol,
|
||||
.token.number,
|
||||
.token.boolean,
|
||||
.token.variable,
|
||||
.token.constant,
|
||||
.token.property,
|
||||
.token.inserted,
|
||||
.token.punctuation,
|
||||
.token.operator {
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.attr-name,
|
||||
.language-autohotkey .token.selector {
|
||||
color: #d73a49;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
const _sharedStates = {
|
||||
platform: 'web',
|
||||
size: 'webSmall',
|
||||
theme: 'light',
|
||||
language: 'en',
|
||||
autoHeight: true,
|
||||
deviceMode: false,
|
||||
rememberSettings: false,
|
||||
edgeDistance: true,
|
||||
};
|
||||
|
||||
/** @type {Function[]} */
|
||||
let subscribeFns = [];
|
||||
|
||||
/**
|
||||
* @param {Function} subscribeFn
|
||||
*/
|
||||
export function subscribe(subscribeFn) {
|
||||
subscribeFns.push(subscribeFn);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Function} subscribeFn
|
||||
*/
|
||||
export function unSubscribe(subscribeFn) {
|
||||
subscribeFns = subscribeFns.filter(fn => fn !== subscribeFn);
|
||||
}
|
||||
|
||||
function storeSettings() {
|
||||
for (const _sharedStateKey of Object.keys(_sharedStates)) {
|
||||
const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
|
||||
if (_sharedStates.rememberSettings) {
|
||||
localStorage.setItem(
|
||||
`mdjsViewerSharedStates-${sharedStateKey}`,
|
||||
_sharedStates[sharedStateKey].toString(),
|
||||
);
|
||||
} else {
|
||||
localStorage.removeItem(`mdjsViewerSharedStates-${sharedStateKey}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let hasGlobalStateBeenSetBefore = false;
|
||||
|
||||
function restoreSettings() {
|
||||
for (const _sharedStateKey of Object.keys(_sharedStates)) {
|
||||
const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
|
||||
const restoredValue = localStorage.getItem(`mdjsViewerSharedStates-${sharedStateKey}`);
|
||||
if (restoredValue !== null) {
|
||||
switch (sharedStateKey) {
|
||||
case 'autoHeight':
|
||||
case 'deviceMode':
|
||||
case 'rememberSettings':
|
||||
case 'edgeDistance':
|
||||
_sharedStates[sharedStateKey] = restoredValue === 'true' ? true : false;
|
||||
break;
|
||||
default:
|
||||
_sharedStates[sharedStateKey] = restoredValue;
|
||||
}
|
||||
hasGlobalStateBeenSetBefore = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
restoreSettings();
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {import('./MdJsPreview.js').MdJsPreview} target
|
||||
*/
|
||||
export function applySharedStates(target) {
|
||||
if (hasGlobalStateBeenSetBefore) {
|
||||
for (const _sharedStateKey of Object.keys(_sharedStates)) {
|
||||
const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
|
||||
switch (sharedStateKey) {
|
||||
case 'autoHeight':
|
||||
case 'deviceMode':
|
||||
case 'rememberSettings':
|
||||
case 'edgeDistance':
|
||||
target[sharedStateKey] = _sharedStates[sharedStateKey];
|
||||
break;
|
||||
default:
|
||||
target[sharedStateKey] = _sharedStates[sharedStateKey];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_saveToSharedStates(target);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {import('./MdJsPreview.js').MdJsPreview} target
|
||||
*/
|
||||
function _saveToSharedStates(target) {
|
||||
let updated = false;
|
||||
for (const _sharedStateKey of Object.keys(_sharedStates)) {
|
||||
const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
|
||||
if (_sharedStates[sharedStateKey] !== target[sharedStateKey]) {
|
||||
switch (sharedStateKey) {
|
||||
case 'autoHeight':
|
||||
case 'deviceMode':
|
||||
case 'rememberSettings':
|
||||
case 'edgeDistance':
|
||||
_sharedStates[sharedStateKey] = target[sharedStateKey];
|
||||
break;
|
||||
default:
|
||||
_sharedStates[sharedStateKey] = target[sharedStateKey];
|
||||
}
|
||||
updated = true;
|
||||
hasGlobalStateBeenSetBefore = true;
|
||||
}
|
||||
}
|
||||
return updated;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {import('./MdJsPreview.js').MdJsPreview} target
|
||||
* @param {Function} subscribedFn
|
||||
*/
|
||||
export function saveToSharedStates(target, subscribedFn) {
|
||||
const updated = _saveToSharedStates(target);
|
||||
if (updated) {
|
||||
storeSettings();
|
||||
for (const subscribeFn of subscribeFns) {
|
||||
if (subscribeFn !== subscribedFn) {
|
||||
subscribeFn();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
let addedCount = 0;
|
||||
|
||||
export function addResizeHandler() {
|
||||
if (addedCount > 0) {
|
||||
addedCount += 1;
|
||||
return;
|
||||
}
|
||||
window.addEventListener('message', ev => {
|
||||
const data = JSON.parse(ev.data);
|
||||
if (data.action === 'mdjs-viewer-resize') {
|
||||
const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ (document.body.querySelector(
|
||||
`[mdjs-story-name="${data.storyKey}"]`,
|
||||
));
|
||||
if (viewer) {
|
||||
viewer.contentHeight = data.height;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
import '@mdjs/mdjs-preview/define';
|
||||
|
||||
/** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
|
||||
|
||||
describe('mdjs-preview', () => {
|
||||
it('will render the element into the shadow root by default', async () => {
|
||||
const el = await fixture(html`
|
||||
<mdjs-preview .story=${() => html`<p id="testing"></p>`}></mdjs-preview>
|
||||
`);
|
||||
expect(el.shadowRoot.querySelectorAll('#testing').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('sync simulator states between instances', async () => {
|
||||
const el = await fixture(html`
|
||||
<div>
|
||||
<mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
|
||||
<mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
|
||||
</div>
|
||||
`);
|
||||
const [preview1, preview2] = /** @type {MdJsPreview[]} */ (el.children);
|
||||
preview1.platform = 'web';
|
||||
preview1.edgeDistance = true;
|
||||
await preview1.updateComplete;
|
||||
expect(preview1.platform).to.equal('web');
|
||||
expect(preview2.platform).to.equal('web');
|
||||
expect(preview1.edgeDistance).to.be.true;
|
||||
expect(preview2.edgeDistance).to.be.true;
|
||||
|
||||
preview1.platform = 'android';
|
||||
preview1.edgeDistance = false;
|
||||
await preview1.updateComplete;
|
||||
expect(preview1.platform).to.equal('android');
|
||||
expect(preview2.platform).to.equal('android');
|
||||
expect(preview1.edgeDistance).to.be.false;
|
||||
expect(preview2.edgeDistance).to.be.false;
|
||||
});
|
||||
});
|
||||
@@ -1,11 +1,5 @@
|
||||
# @mdjs/mdjs-story
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 604a80e: Force `/define`Ï entrypoint via export map
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { MdJsStory } from './MdJsStory.js';
|
||||
import { MdJsStory } from './src/MdJsStory.js';
|
||||
|
||||
customElements.define('mdjs-story', MdJsStory);
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mdjs/mdjs-story",
|
||||
"version": "0.2.0",
|
||||
"version": "0.1.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -17,7 +17,7 @@
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./index.js",
|
||||
"./define": "./src/define.js"
|
||||
"./mdjs-story.js": "./mdjs-story.js"
|
||||
},
|
||||
"scripts": {
|
||||
"debug": "cd ../../ && npm run debug -- --group mdjs-story",
|
||||
|
||||
3
packages/playground/README.md
Normal file
3
packages/playground/README.md
Normal 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
1
packages/playground/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { RocketPlayground } from './src/RocketPlayground.js';
|
||||
40
packages/playground/package.json
Normal file
40
packages/playground/package.json
Normal 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
3
packages/playground/rocket-playground.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { RocketPlayground } from './src/RocketPlayground.js';
|
||||
|
||||
customElements.define('rocket-playground', RocketPlayground);
|
||||
133
packages/playground/src/DevicePreview.js
Normal file
133
packages/playground/src/DevicePreview.js
Normal 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
170
packages/playground/src/RocketPlayground.js
Normal 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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -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
3
packages/playground/src/device-preview.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { DevicePreview } from './DevicePreview.js';
|
||||
|
||||
customElements.define('device-preview', DevicePreview);
|
||||
37
packages/playground/src/devices.js
Normal file
37
packages/playground/src/devices.js
Normal 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
27
packages/playground/src/frame.svg.js
Normal 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,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
24
packages/playground/tsconfig.json
Normal 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"
|
||||
]
|
||||
}
|
||||
@@ -13,8 +13,8 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/docs/tools/plugins-manager/",
|
||||
"main": "./dist/index.cjs",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/index.cjs",
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
# @rocket/search
|
||||
|
||||
## 0.3.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 818caad: chore: generalize label & add alt when no img
|
||||
- 0b64116: Update @lion dependencies
|
||||
|
||||
## 0.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/search",
|
||||
"version": "0.3.3",
|
||||
"version": "0.3.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -13,8 +13,8 @@
|
||||
},
|
||||
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
|
||||
"homepage": "https://rocket.modern-web.dev/docs/presets/search/",
|
||||
"main": "./node.js",
|
||||
"type": "module",
|
||||
"main": "./node.js",
|
||||
"exports": {
|
||||
".": "./node.js",
|
||||
"./node": "./node.js",
|
||||
@@ -41,7 +41,7 @@
|
||||
"search"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/combobox": "^0.5.1",
|
||||
"@lion/combobox": "^0.1.20",
|
||||
"@open-wc/scoped-elements": "^1.3.2",
|
||||
"chalk": "^4.0.0",
|
||||
"minisearch": "^3.0.2",
|
||||
|
||||
@@ -2,16 +2,11 @@ import { rocketLaunch } from '@rocket/launch';
|
||||
import { rocketBlog } from '@rocket/blog';
|
||||
import { rocketSearch } from '@rocket/search';
|
||||
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
|
||||
import { adjustPluginOptions } from 'plugins-manager';
|
||||
|
||||
export default {
|
||||
/** @type {Partial<import("./packages/cli/types/main").RocketCliOptions>} */
|
||||
const config = {
|
||||
presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
|
||||
absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
|
||||
setupUnifiedPlugins: [
|
||||
adjustPluginOptions('mdjsSetupCode', {
|
||||
simulationSettings: { simulatorUrl: '/simulator/' },
|
||||
}),
|
||||
],
|
||||
|
||||
// emptyOutputDir: false,
|
||||
};
|
||||
}
|
||||
export default config;
|
||||
|
||||
217
yarn.lock
217
yarn.lock
@@ -1134,66 +1134,59 @@
|
||||
dependencies:
|
||||
"@hapi/hoek" "^8.3.0"
|
||||
|
||||
"@lion/accordion@^0.4.2":
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.4.2.tgz#efeb56360113a2b68e182ff29ef0932edd17df8c"
|
||||
integrity sha512-xETjNmpBWYO1tYx2nBMq0I45UgydUJafZ4ft3szH3fQFjYWSBwjJjKsWxIhZSqX/IoTJzA0nNCdtbXoVEbSCLg==
|
||||
"@lion/combobox@^0.1.20":
|
||||
version "0.1.20"
|
||||
resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.1.20.tgz#9514c655171773a12f9c841187297f8791a029a6"
|
||||
integrity sha512-Iw3BzZv7K36c2ReBDD76298VrNTPe7XElGAnr9/jzTH22eJdZD33DBXcY3D/tJlrhh02aC+4nTYxTww33lRqCA==
|
||||
dependencies:
|
||||
"@lion/core" "0.16.0"
|
||||
"@lion/core" "0.13.7"
|
||||
"@lion/form-core" "0.7.0"
|
||||
"@lion/listbox" "0.4.0"
|
||||
"@lion/overlays" "0.23.2"
|
||||
|
||||
"@lion/combobox@^0.5.1":
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.5.1.tgz#6395d5c34f0935aee32034584a253c1a2c6fa717"
|
||||
integrity sha512-sOpJLCH8pzZAOohrqVnlTjC7L93tavXugSV2SqhVsFFnSQIWXytaeL8eJPlVBrTrmcOpns6AQX2uyBbeY6ZTsg==
|
||||
dependencies:
|
||||
"@lion/core" "0.16.0"
|
||||
"@lion/form-core" "0.11.0"
|
||||
"@lion/listbox" "0.7.0"
|
||||
"@lion/overlays" "0.26.1"
|
||||
|
||||
"@lion/core@0.16.0":
|
||||
version "0.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.16.0.tgz#c4c8ac81b8d5bece6d40d561a392382c7ae73533"
|
||||
integrity sha512-/MB/G44fZtL+s8iX1GAnyjw+Drn+fROkA13BpTn808UrDMGQ+WW1oq67Wp9Hr+t34LB3ghH3tm7afniDMa1VCA==
|
||||
"@lion/core@0.13.7":
|
||||
version "0.13.7"
|
||||
resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.13.7.tgz#c49cff0c7199711c14d9758b8e340cd93aca2f8c"
|
||||
integrity sha512-9KwCwd1DDM26wLEib30Lw/6Nexcz3o1SSxnBlOdLFE/akJhi9nZOK1YmlSefL0XosND8ngCa1DXn348W8B693w==
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin" "^1.2.18"
|
||||
"@open-wc/scoped-elements" "^1.3.3"
|
||||
"@open-wc/scoped-elements" "^1.3.2"
|
||||
lit-element "~2.4.0"
|
||||
lit-html "^1.3.0"
|
||||
|
||||
"@lion/form-core@0.11.0":
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/form-core/-/form-core-0.11.0.tgz#83985baba62e11082b42ea84f3683f72a8f36fcf"
|
||||
integrity sha512-opDXzTtVHJlRo+BLSI0dtSjbIz7PsJL80wnU8WAK3S+WNH5z2S37OBCoVvOVpXRpoqGAj5L/BmaJnHZeo6pPYw==
|
||||
dependencies:
|
||||
"@lion/core" "0.16.0"
|
||||
"@lion/localize" "0.18.0"
|
||||
|
||||
"@lion/listbox@0.7.0":
|
||||
"@lion/form-core@0.7.0":
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.7.0.tgz#bd1d8cb25098387fd0ae1087f8dd641510f741f0"
|
||||
integrity sha512-wHGqahRIjpTmMAvU/hDZyDGNhmjRj6FEYSWn7Z3ugE52D9a1PQd7HVc1cVVIRc71jC3w4n5ZYVeZChwR3N3fWw==
|
||||
resolved "https://registry.yarnpkg.com/@lion/form-core/-/form-core-0.7.0.tgz#0df2cefb62876dd62e2baa980129ed7bf790b3ae"
|
||||
integrity sha512-5aWqKNQgJKgqJC6VIRNoGe5imz9w0thLEnPqWJ8y6vSru/BC114ZLefvmltK9FG21DPkPOCa+vm4PSjilaqh1w==
|
||||
dependencies:
|
||||
"@lion/core" "0.16.0"
|
||||
"@lion/form-core" "0.11.0"
|
||||
"@lion/core" "0.13.7"
|
||||
"@lion/localize" "0.15.4"
|
||||
|
||||
"@lion/localize@0.18.0":
|
||||
version "0.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.18.0.tgz#beaf8c161feb58ecab670892c06e7b524527b7e8"
|
||||
integrity sha512-+adOGlot4IItOy1udLKflZlO2fTKM7R0Ji7iZ5SEVG80XOZxC3RXjVM7mWSd5wqcCUe51j1P/tgKM3vDLF0RAw==
|
||||
"@lion/listbox@0.4.0":
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.4.0.tgz#429838fd75d40662b67e5a3f611bf3ea94b506de"
|
||||
integrity sha512-bwVIlVX0cQoKKGf6HNqDmTH5JUM0TKAzZuHsrmLcsYG9V5bgMjfiLBXPNQxyy39WOwicPM8f2g+O5rRXBcsIYQ==
|
||||
dependencies:
|
||||
"@lion/core" "0.13.7"
|
||||
"@lion/form-core" "0.7.0"
|
||||
|
||||
"@lion/localize@0.15.4":
|
||||
version "0.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.15.4.tgz#b9ed5eb5b3a1304694314b4d6bbbcddc0b85f616"
|
||||
integrity sha512-OP7Og/JXWl4Wm+AzLNKcCAoeft5eQfZlkvEFqOnRuGAXxotbxwk+yQB3kI/K7QvLURNQbv6mzwdDu2buhZdV9w==
|
||||
dependencies:
|
||||
"@bundled-es-modules/message-format" "6.0.4"
|
||||
"@lion/core" "0.16.0"
|
||||
singleton-manager "1.4.1"
|
||||
"@lion/core" "0.13.7"
|
||||
singleton-manager "1.2.1"
|
||||
|
||||
"@lion/overlays@0.26.1", "@lion/overlays@^0.26.1":
|
||||
version "0.26.1"
|
||||
resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.26.1.tgz#d1bfa4f5f97108982afa7b409ba4300f8b2d2ba5"
|
||||
integrity sha512-1FvphbR/yTQ1WtcB1gNuH772i9qAydQkI6NwibIw8QeOGXisA+6SChv2OHS7CijlpDJnDxNyX44LGdDM1/Pd8A==
|
||||
"@lion/overlays@0.23.2", "@lion/overlays@^0.23.2":
|
||||
version "0.23.2"
|
||||
resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.23.2.tgz#cfdff6cb7ee4f46cdaa621574affbe2e9c374976"
|
||||
integrity sha512-nKVSn37arx9+gdmlIj3gEkpJXGTnsUvbOEXcymLEFJBekvdYKCNWDe9bVBX/iTBBsgO0rQ9+eA5RskxwKPdraQ==
|
||||
dependencies:
|
||||
"@lion/core" "0.16.0"
|
||||
"@lion/core" "0.13.7"
|
||||
"@popperjs/core" "^2.5.4"
|
||||
singleton-manager "1.4.1"
|
||||
singleton-manager "1.2.1"
|
||||
|
||||
"@manypkg/find-root@^1.1.0":
|
||||
version "1.1.0"
|
||||
@@ -1258,14 +1251,6 @@
|
||||
"@open-wc/dedupe-mixin" "^1.3.0"
|
||||
lit-html "^1.0.0"
|
||||
|
||||
"@open-wc/scoped-elements@^1.3.3":
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.3.3.tgz#fe008aef4d74fb00c553c900602960638fc1c7b0"
|
||||
integrity sha512-vFIQVYYjFw67odUE4JzZOpctnF7S/2DX+S+clrL3bQPql7HvEnV0wMFwOWUavQTuCJi0rfU8GTcNMiUybio+Yg==
|
||||
dependencies:
|
||||
"@open-wc/dedupe-mixin" "^1.3.0"
|
||||
lit-html "^1.0.0"
|
||||
|
||||
"@open-wc/semantic-dom-diff@^0.13.16":
|
||||
version "0.13.21"
|
||||
resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.13.21.tgz#718b9ec5f9a98935fc775e577ad094ae8d8b7dea"
|
||||
@@ -1793,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"
|
||||
@@ -1871,32 +1861,25 @@
|
||||
"@types/parse5" "^5.0.3"
|
||||
parse5 "^6.0.1"
|
||||
|
||||
"@web/parse5-utils@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@web/parse5-utils/-/parse5-utils-1.2.2.tgz#33eec93321eb07cf364651c131b980a7afd8c4d7"
|
||||
integrity sha512-B68DoJ5qF8Cu3o7nDA2RQTCf9bslVz2b0WHTk3qir5YCbWfhnPEGhDOedOjbE8xDiHqgzI1zXQsJ2+655aluLA==
|
||||
"@web/polyfills-loader@^1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@web/polyfills-loader/-/polyfills-loader-1.0.1.tgz#cee51b6aa956a3c061c5018ce14424958b85946a"
|
||||
integrity sha512-2c2UQpAYT2xSmo7mwf3RHsl9o7toB+dzVZbLEoDKCRhKX4T4jeiCSL828HrgHffckDI/PDIrsXtJ+SLvu4xGvg==
|
||||
dependencies:
|
||||
"@types/parse5" "^5.0.3"
|
||||
parse5 "^6.0.1"
|
||||
|
||||
"@web/polyfills-loader@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@web/polyfills-loader/-/polyfills-loader-1.1.0.tgz#9df3da3d40159fce55c17cc370750052f62798bd"
|
||||
integrity sha512-1bF1nhFG25isy6NbMhz9jVBCoXqrB1WzxkhT8Pyw9vKhXO+F83+TUWp0QeInsvvDVo0QPIeg+bVz6spRJrvfkg==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/core" "^7.11.1"
|
||||
"@web/parse5-utils" "^1.1.2"
|
||||
"@webcomponents/webcomponentsjs" "^2.5.0"
|
||||
abortcontroller-polyfill "^1.5.0"
|
||||
core-js-bundle "^3.8.1"
|
||||
abortcontroller-polyfill "^1.4.0"
|
||||
core-js-bundle "^3.6.0"
|
||||
deepmerge "^4.2.2"
|
||||
dynamic-import-polyfill "^0.1.1"
|
||||
intersection-observer "^0.12.0"
|
||||
parse5 "^6.0.1"
|
||||
regenerator-runtime "^0.13.7"
|
||||
intersection-observer "^0.11.0"
|
||||
parse5 "^6.0.0"
|
||||
regenerator-runtime "^0.13.3"
|
||||
resize-observer-polyfill "^1.5.1"
|
||||
systemjs "^6.8.1"
|
||||
terser "^5.5.1"
|
||||
whatwg-fetch "^3.5.0"
|
||||
systemjs "^6.7.1"
|
||||
terser "^5.3.8"
|
||||
whatwg-fetch "^3.0.0"
|
||||
|
||||
"@web/rollup-plugin-copy@^0.2.0":
|
||||
version "0.2.0"
|
||||
@@ -1905,12 +1888,12 @@
|
||||
dependencies:
|
||||
glob "^7.0.0"
|
||||
|
||||
"@web/rollup-plugin-html@^1.6.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.6.0.tgz#fd3f406fd6d74a0cded581953a3146fe9f0454ad"
|
||||
integrity sha512-m5xDI6ZhdAI2nfHwU3NXJ/dcDWghR+g/RrlAtIWYlj8NvXk/ZNqVVK1NbJrI/e5RlgDQ/+OycjmKgyAP9W1tWA==
|
||||
"@web/rollup-plugin-html@^1.4.0":
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.4.0.tgz#bf94d1ee525e5f41dc527bbff9f7e24973a82238"
|
||||
integrity sha512-AYOeRuNsPXQmNpxlJRFLlfVMm4EazXcJEz0bbVd6wKQVcEBM71kRboGfupxhoIkDcVyThefw9gETcMZ4ntUcTw==
|
||||
dependencies:
|
||||
"@web/parse5-utils" "^1.2.2"
|
||||
"@web/parse5-utils" "^1.1.2"
|
||||
glob "^7.1.6"
|
||||
parse5 "^6.0.1"
|
||||
|
||||
@@ -1923,12 +1906,12 @@
|
||||
estree-walker "^2.0.1"
|
||||
magic-string "^0.25.7"
|
||||
|
||||
"@web/rollup-plugin-polyfills-loader@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@web/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.1.0.tgz#5d49c11c6e9874550d8bac2934d368e6437c9982"
|
||||
integrity sha512-p3GtEKeeyRJa5S/sKWpIa3eg+fiPeYux+Z+r85kxyAw4FY+4AOts9vEeg1McEDjCZ/4V40X2vaPTi1alFBNrig==
|
||||
"@web/rollup-plugin-polyfills-loader@^1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@web/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.3.tgz#26b162c20cf22100117c154793d6be232cbb979b"
|
||||
integrity sha512-9DkZy0x5F+axj3gDx36x5mxvqg9ugVIS85hCZT2uDEBJ1VBVdSG0pzI5R5zHaLAq/Xk88D999S0zLVRE7DKuHw==
|
||||
dependencies:
|
||||
"@web/polyfills-loader" "^1.1.0"
|
||||
"@web/polyfills-loader" "^1.0.1"
|
||||
|
||||
"@web/test-runner-chrome@^0.9.0":
|
||||
version "0.9.0"
|
||||
@@ -2032,10 +2015,10 @@ abbrev@1:
|
||||
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
|
||||
integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
|
||||
|
||||
abortcontroller-polyfill@^1.5.0:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.1.tgz#27084bac87d78a7224c8ee78135d05df430c2d2f"
|
||||
integrity sha512-yml9NiDEH4M4p0G4AcPkg8AAa4mF3nfYF28VQxaokpO67j9H7gWgmsVWJ/f1Rn+PzsnDYvzJzWIQzCqDKRvWlA==
|
||||
abortcontroller-polyfill@^1.4.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.5.0.tgz#2c562f530869abbcf88d949a2b60d1d402e87a7c"
|
||||
integrity sha512-O6Xk757Jb4o0LMzMOMdWvxpHWrQzruYBaUruFaIOfAQRnWFxfdXYobw12jrVHGtoXk6WiiyYzc0QWN9aL62HQA==
|
||||
|
||||
accepts@^1.3.5, accepts@~1.3.4:
|
||||
version "1.3.7"
|
||||
@@ -3155,10 +3138,10 @@ copyfiles@^2.4.1:
|
||||
untildify "^4.0.0"
|
||||
yargs "^16.1.0"
|
||||
|
||||
core-js-bundle@^3.8.1:
|
||||
version "3.10.2"
|
||||
resolved "https://registry.yarnpkg.com/core-js-bundle/-/core-js-bundle-3.10.2.tgz#16734b2674373afa40f0533b985a1c9e87bd426f"
|
||||
integrity sha512-cU/daFGOLWwtNAdXBksUl2HNqPOaM5g6bMxJ8doMw9PkshbWSzUweog2EEJsIlgmCCAFI0NLDBl4SD2TzZEevw==
|
||||
core-js-bundle@^3.6.0:
|
||||
version "3.8.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js-bundle/-/core-js-bundle-3.8.1.tgz#a4445eff5da56e316f68365ec89648be1027a808"
|
||||
integrity sha512-bkulwU0ZPkG9aZ79JCRL5ltTSvxP9YsKfyZ6ZpGolJ8BEDGK3BFPPmQ2LlWSuhSshcIxIQzArCSXBYacyGf+aQ==
|
||||
|
||||
core-js-compat@^3.8.0:
|
||||
version "3.8.1"
|
||||
@@ -4767,10 +4750,10 @@ inline-style-parser@0.1.1:
|
||||
resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
|
||||
integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
|
||||
|
||||
intersection-observer@^0.12.0:
|
||||
version "0.12.0"
|
||||
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
|
||||
integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
|
||||
intersection-observer@^0.11.0:
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
|
||||
integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
|
||||
|
||||
ip@^1.1.5:
|
||||
version "1.1.5"
|
||||
@@ -7166,7 +7149,7 @@ regenerator-runtime@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
|
||||
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
|
||||
|
||||
regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
|
||||
regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
|
||||
version "0.13.7"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
|
||||
integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
|
||||
@@ -7720,10 +7703,10 @@ simple-swizzle@^0.2.2:
|
||||
dependencies:
|
||||
is-arrayish "^0.3.1"
|
||||
|
||||
singleton-manager@1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.1.tgz#0a9cd1db2b26e5cbc4ecdc20d5a16f284b36aabb"
|
||||
integrity sha512-HOvKT/WcHvl2cLYGqmO6MaC2J4wAA82LntGwtLn6avnTq15UDLCnSRVXedmglVooLbQGVsQJ+dQz2sKz+2GUZA==
|
||||
singleton-manager@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.2.1.tgz#9ad080707f0fe1be849e14994d3e7a2308d56f83"
|
||||
integrity sha512-n+G7rHlANmJsi6Y6K7wV3wluO0oT1veSIL/vazbnG+nXfc4fB855JwsBXHccm1pCi7vNSh63PRGzoIfCBo3b+g==
|
||||
|
||||
sinon-chai@^3.3.0:
|
||||
version "3.5.0"
|
||||
@@ -8192,10 +8175,10 @@ symbol-observable@1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
|
||||
integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
|
||||
|
||||
systemjs@^6.8.1:
|
||||
version "6.8.3"
|
||||
resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.8.3.tgz#67e27f49242e9d81c2b652b204ae54e8bfcc75a3"
|
||||
integrity sha512-UcTY+FEA1B7e+bpJk1TI+a9Na6LG7wFEqW7ED16cLqLuQfI/9Ri0rsXm3tKlIgNoHyLHZycjdAOijzNbzelgwA==
|
||||
systemjs@^6.7.1:
|
||||
version "6.8.2"
|
||||
resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.8.2.tgz#6200ce215ee5eb8d6c2815b9470c52015cb3c867"
|
||||
integrity sha512-YknH4S+Xq7Rlwdnvyj4QKHWm5YQGPJnnkVXFQLC/Wl/O21nZ+NrV9IjwUQQ0Pl0Jh0Wgf91IeGzSHGELsv5kkA==
|
||||
|
||||
table-layout@^1.0.1:
|
||||
version "1.0.1"
|
||||
@@ -8265,7 +8248,7 @@ term-size@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
|
||||
integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
|
||||
|
||||
terser@^5.0.0:
|
||||
terser@^5.0.0, terser@^5.3.8:
|
||||
version "5.5.1"
|
||||
resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
|
||||
integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==
|
||||
@@ -8274,15 +8257,6 @@ terser@^5.0.0:
|
||||
source-map "~0.7.2"
|
||||
source-map-support "~0.5.19"
|
||||
|
||||
terser@^5.5.1:
|
||||
version "5.6.1"
|
||||
resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.1.tgz#a48eeac5300c0a09b36854bf90d9c26fb201973c"
|
||||
integrity sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
|
||||
dependencies:
|
||||
commander "^2.20.0"
|
||||
source-map "~0.7.2"
|
||||
source-map-support "~0.5.19"
|
||||
|
||||
text-table@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
|
||||
@@ -8775,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"
|
||||
@@ -8792,10 +8771,10 @@ webidl-conversions@^6.1.0:
|
||||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
|
||||
integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
|
||||
|
||||
whatwg-fetch@^3.5.0:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
|
||||
integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
|
||||
whatwg-fetch@^3.0.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
|
||||
integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
|
||||
|
||||
whatwg-url@^8.4.0:
|
||||
version "8.4.0"
|
||||
|
||||
Reference in New Issue
Block a user