mirror of
https://github.com/modernweb-dev/rocket.git
synced 2026-03-21 15:54:57 +00:00
Compare commits
10 Commits
plugins-ma
...
feat/playg
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
00ebeea10f | ||
|
|
818caad7cb | ||
|
|
672b7e893e | ||
|
|
a8e66d84f4 | ||
|
|
e9090d64b9 | ||
|
|
728a205b7b | ||
|
|
67ba29d45a | ||
|
|
758caffdf9 | ||
|
|
302227e8a9 | ||
|
|
04a31220fb |
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
|
||||
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>
|
||||
@@ -132,31 +132,6 @@ export const header = () => {
|
||||
|
||||
## Supported Systems
|
||||
|
||||
### es-dev-server
|
||||
|
||||
Preview your mdjs readme with live demos and auto reload.
|
||||
|
||||
- Add to your `package.json`:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "es-dev-server",
|
||||
}
|
||||
```
|
||||
|
||||
- Create a `es-dev-server.config.js` in the root of your repository.
|
||||
|
||||
```js
|
||||
const { mdjsTransformer } = require('@mdjs/core');
|
||||
|
||||
module.exports = {
|
||||
nodeResolve: true,
|
||||
open: 'README.md',
|
||||
watch: true,
|
||||
responseTransformers: [mdjsTransformer],
|
||||
};
|
||||
```
|
||||
|
||||
### Storybook
|
||||
|
||||
Please check out [@open-wc/demoing-storybook](https://open-wc.org/demoing/) for a fully integrated setup.
|
||||
|
||||
@@ -2,10 +2,16 @@
|
||||
|
||||
You can showcase live running code by annotating a code block with `js preview-story`.
|
||||
|
||||
````md
|
||||
```js preview-story
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
```
|
||||
|
||||
````md
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
```
|
||||
|
||||
```js preview-story
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
````
|
||||
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
|
||||
will result in
|
||||
|
||||
```js preview-story
|
||||
import { html } from 'lit-html';
|
||||
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
|
||||
@@ -2,10 +2,16 @@
|
||||
|
||||
You can showcase live running code by annotating a code block with `js story`.
|
||||
|
||||
````md
|
||||
```js story
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
```
|
||||
|
||||
````md
|
||||
```js script
|
||||
import { html } from 'lit-html';
|
||||
```
|
||||
|
||||
```js story
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
````
|
||||
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
|
||||
will result in
|
||||
|
||||
```js story
|
||||
import { html } from 'lit-html';
|
||||
|
||||
export const foo = () => html` <p>my html</p> `;
|
||||
```
|
||||
|
||||
@@ -47,3 +47,9 @@ export const headlineConverter = () => html`
|
||||
```
|
||||
|
||||
How it then works is very similar to https://www.11ty.dev/docs/plugins/navigation/
|
||||
|
||||
## Sidebar redirects
|
||||
|
||||
By default, the sidebar nav redirects clicks on category headings to the first child page in that category.
|
||||
|
||||
To disable those redirects, override `_includes/_joiningBlocks/_layoutSidebar/sidebar/20-navigation.njk` and add the `no-redirects` attribute to the `<rocket-navigation>` element.
|
||||
|
||||
3
docs/playground.md
Normal file
3
docs/playground.md
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
layout: layout-playground
|
||||
---
|
||||
@@ -38,6 +38,6 @@
|
||||
"testing"
|
||||
],
|
||||
"dependencies": {
|
||||
"plugins-manager": "^0.2.0"
|
||||
"plugins-manager": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -53,13 +53,12 @@ describe('eleventy-plugin-mdjs-unified', () => {
|
||||
|
||||
it('renders markdown with javascript', async () => {
|
||||
const files = await renderEleventy('./test-node/fixtures/mdjs');
|
||||
expect(files).to.deep.equal([
|
||||
{
|
||||
html:
|
||||
'<h1 id="first"><a aria-hidden="true" tabindex="-1" href="#first"><span class="icon icon-link"></span></a>First</h1>\n<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">\'bar\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> html <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'lit-html\'</span><span class="token punctuation">;</span>\n</code></pre>\n<mdjs-story mdjs-story-name="inline"></mdjs-story>\n<mdjs-preview mdjs-story-name="withBorder"></mdjs-preview>\n <script type="module">\n \nexport const inline = () => html` <p>main</p> `;\nexport const withBorder = () => html` <p>main</p> `;\nconst rootNode = document;\nconst stories = [{ key: \'inline\', story: inline, 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">inline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }, { key: \'withBorder\', story: withBorder, 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">withBorder</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }];\nfor (const story of stories) {\n const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);\n storyEl.codeHasHtml = true;\n storyEl.story = story.story;\n storyEl.code = story.code;\n};\nif (!customElements.get(\'mdjs-preview\')) { import(\'@mdjs/mdjs-preview/mdjs-preview.js\'); }\nif (!customElements.get(\'mdjs-story\')) { import(\'@mdjs/mdjs-story/mdjs-story.js\'); }\n </script>\n ',
|
||||
name: 'first/index.html',
|
||||
},
|
||||
]);
|
||||
|
||||
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('for (const story of stories)');
|
||||
});
|
||||
|
||||
it('rewrites relative import pathes', async () => {
|
||||
|
||||
@@ -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": {
|
||||
@@ -36,6 +37,6 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@rocket/drawer": "^0.1.2",
|
||||
"@rocket/navigation": "^0.2.0"
|
||||
"@rocket/navigation": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,12 +43,12 @@
|
||||
"remark"
|
||||
],
|
||||
"dependencies": {
|
||||
"@mdjs/mdjs-preview": "^0.3.1",
|
||||
"@mdjs/mdjs-story": "^0.1.1",
|
||||
"@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",
|
||||
"plugins-manager": "^0.2.0",
|
||||
"plugins-manager": "^0.2.1",
|
||||
"rehype-autolink-headings": "^5.0.1",
|
||||
"rehype-prism-template": "^0.4.1",
|
||||
"rehype-raw": "^5.0.0",
|
||||
|
||||
@@ -18,6 +18,7 @@ const { executeSetupFunctions } = require('plugins-manager');
|
||||
|
||||
const { mdjsParse } = require('./mdjsParse.js');
|
||||
const { mdjsStoryParse } = require('./mdjsStoryParse.js');
|
||||
const { mdjsSetupCode } = require('./mdjsSetupCode.js');
|
||||
|
||||
/** @type {MdjsProcessPlugin[]} */
|
||||
const defaultMetaPlugins = [
|
||||
@@ -25,6 +26,7 @@ const defaultMetaPlugins = [
|
||||
{ name: 'gfm', plugin: gfm },
|
||||
{ name: 'mdjsParse', plugin: mdjsParse },
|
||||
{ name: 'mdjsStoryParse', plugin: mdjsStoryParse },
|
||||
{ name: 'mdjsSetupCode', plugin: mdjsSetupCode },
|
||||
// @ts-ignore
|
||||
{ name: 'remark2rehype', plugin: remark2rehype, options: { allowDangerousHtml: true } },
|
||||
// @ts-ignore
|
||||
@@ -50,29 +52,15 @@ const defaultMetaPlugins = [
|
||||
* @param {function[]} [options.setupUnifiedPlugins]
|
||||
* @param {MdjsProcessPlugin[]} [options.plugins] deprecated option use setupUnifiedPlugins instead
|
||||
*/
|
||||
async function mdjsProcess(
|
||||
mdjs,
|
||||
{ rootNodeQueryCode = 'document', setupUnifiedPlugins = [] } = {},
|
||||
) {
|
||||
async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) {
|
||||
const parser = unified();
|
||||
|
||||
const metaPlugins = executeSetupFunctions(setupUnifiedPlugins, defaultMetaPlugins);
|
||||
|
||||
// @ts-ignore
|
||||
for (const pluginObj of metaPlugins) {
|
||||
parser.use(pluginObj.plugin, pluginObj.options);
|
||||
}
|
||||
|
||||
/** @type {unknown} */
|
||||
const parseResult = await parser.process(mdjs);
|
||||
const result = /** @type {ParseResult} */ (parseResult);
|
||||
|
||||
const { stories, jsCode } = result.data;
|
||||
let fullJsCode = jsCode;
|
||||
|
||||
if (stories && stories.length > 0) {
|
||||
const storiesCode = stories.map(story => story.code).join('\n');
|
||||
|
||||
/**
|
||||
* @param {string} code
|
||||
*/
|
||||
async function highlightCode(code) {
|
||||
// @ts-ignore
|
||||
const codePlugins = metaPlugins.filter(pluginObj =>
|
||||
['markdown', 'remark2rehype', 'rehypePrism', 'htmlStringify'].includes(pluginObj.name),
|
||||
@@ -82,46 +70,30 @@ async function mdjsProcess(
|
||||
for (const pluginObj of codePlugins) {
|
||||
codeParser.use(pluginObj.plugin, pluginObj.options);
|
||||
}
|
||||
|
||||
const invokeStoriesCode = [];
|
||||
for (const story of stories) {
|
||||
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;
|
||||
}
|
||||
const codeResult = await codeParser.process(code);
|
||||
const highlightedCode = /** @type {string} */ (codeResult.contents)
|
||||
.replace(/`/g, '\\`')
|
||||
.replace(/\$/g, '\\$');
|
||||
invokeStoriesCode.push(
|
||||
`{ key: '${story.key}', story: ${story.key}, code: \`${highlightedCode}\` }`,
|
||||
);
|
||||
}
|
||||
|
||||
fullJsCode = [
|
||||
jsCode,
|
||||
storiesCode,
|
||||
`const rootNode = ${rootNodeQueryCode};`,
|
||||
`const stories = [${invokeStoriesCode.join(', ')}];`,
|
||||
`for (const story of stories) {`,
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
' const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
|
||||
` storyEl.codeHasHtml = true;`,
|
||||
` storyEl.story = story.story;`,
|
||||
` storyEl.code = story.code;`,
|
||||
`};`,
|
||||
`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 codeResult = await codeParser.process(code);
|
||||
return codeResult.contents;
|
||||
}
|
||||
return { stories, jsCode: fullJsCode, html: result.contents };
|
||||
|
||||
// @ts-ignore
|
||||
for (const pluginObj of metaPlugins) {
|
||||
if (pluginObj.name === 'mdjsSetupCode') {
|
||||
if (pluginObj.options && !pluginObj.options.highlightCode) {
|
||||
pluginObj.options.highlightCode = highlightCode;
|
||||
}
|
||||
if (!pluginObj.options) {
|
||||
pluginObj.options = { highlightCode };
|
||||
}
|
||||
}
|
||||
parser.use(pluginObj.plugin, pluginObj.options);
|
||||
}
|
||||
|
||||
/** @type {unknown} */
|
||||
const parseResult = await parser.process(mdjs);
|
||||
const result = /** @type {ParseResult} */ (parseResult);
|
||||
|
||||
const { stories, setupJsCode } = result.data;
|
||||
|
||||
return { stories, jsCode: setupJsCode, html: result.contents };
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
68
packages/mdjs-core/src/mdjsSetupCode.js
Normal file
68
packages/mdjs-core/src/mdjsSetupCode.js
Normal file
@@ -0,0 +1,68 @@
|
||||
/** @typedef {import('vfile').VFileOptions} VFileOptions */
|
||||
/** @typedef {import('unist').Node} Node */
|
||||
/** @typedef {import('@mdjs/core/types/code').Story} Story */
|
||||
|
||||
function mdjsSetupCode({
|
||||
rootNodeQueryCode = 'document',
|
||||
highlightCode = /** @param {string} code */ code => code,
|
||||
} = {}) {
|
||||
/**
|
||||
* @param {Node} tree
|
||||
* @param {VFileOptions} file
|
||||
*/
|
||||
async function transformer(tree, file) {
|
||||
const { stories, jsCode } = file.data;
|
||||
|
||||
file.data.setupJsCode = jsCode;
|
||||
|
||||
if (stories && stories.length > 0) {
|
||||
const storiesCode = stories.map(/** @param {Story} story */ story => story.code).join('\n');
|
||||
|
||||
const invokeStoriesCode = [];
|
||||
for (const story of stories) {
|
||||
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 = [
|
||||
jsCode,
|
||||
storiesCode,
|
||||
`const rootNode = ${rootNodeQueryCode};`,
|
||||
`const stories = [${invokeStoriesCode.join(', ')}];`,
|
||||
`for (const story of stories) {`,
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
' const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
|
||||
` storyEl.codeHasHtml = true;`,
|
||||
` storyEl.story = story.story;`,
|
||||
` storyEl.code = story.code;`,
|
||||
` storyEl.jsCode = \`${jsCode.replace(/`/g, '\\`')}\`;`,
|
||||
`};`,
|
||||
`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');
|
||||
}
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
return transformer;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
mdjsSetupCode,
|
||||
};
|
||||
@@ -43,12 +43,14 @@ describe('mdjsProcess', () => {
|
||||
' storyEl.codeHasHtml = true;',
|
||||
' storyEl.story = story.story;',
|
||||
' storyEl.code = story.code;',
|
||||
' storyEl.jsCode = `const bar = 2;`;',
|
||||
'};',
|
||||
`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);
|
||||
|
||||
expect(result.html).to.equal(expected);
|
||||
expect(result.jsCode).to.equal(expectedJsCode);
|
||||
});
|
||||
|
||||
@@ -28,7 +28,7 @@ describe('mdjsParse', () => {
|
||||
expect(/** @type {MDJSVFileData} */ (result.data).jsCode).to.equal('const bar = 22;');
|
||||
});
|
||||
|
||||
// TODO: fix this bug
|
||||
// TODO: fix this bug - maybe something in unified itself 🤔
|
||||
it.skip('handling only "js script" code blocks', async () => {
|
||||
const input = [
|
||||
//
|
||||
|
||||
1
packages/mdjs-core/types/code.d.ts
vendored
1
packages/mdjs-core/types/code.d.ts
vendored
@@ -25,6 +25,7 @@ export interface ParseResult {
|
||||
data: {
|
||||
stories: Story[];
|
||||
jsCode: string;
|
||||
setupJsCode: string;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @rocket/navigation
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 728a205: feat(navigation): add no-redirects attribute
|
||||
|
||||
By default, the sidebar nav redirects clicks on category headings to
|
||||
their first child.
|
||||
|
||||
To disable those redirects, override
|
||||
\_includes/\_joiningBlocks/\_layoutSidebar/sidebar/20-navigation.njk
|
||||
and add the no-redirects attribute to the <rocket-navigation>
|
||||
element.
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/navigation",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
|
||||
@@ -1,3 +1,27 @@
|
||||
/**
|
||||
* Debounce a function
|
||||
* @template {(this: any, ...args: any[]) => void} T
|
||||
* @param {T} func function
|
||||
* @param {number} wait time in milliseconds to debounce
|
||||
* @param {boolean} immediate when true, run immediately and on the leading edge
|
||||
* @return {T} debounced function
|
||||
*/
|
||||
function debounce(func, wait, immediate) {
|
||||
/** @type {number|undefined} */
|
||||
let timeout;
|
||||
return /** @type {typeof func}*/ (function () {
|
||||
let args = /** @type {Parameters<typeof func>} */ (/** @type {unknown}*/ (arguments));
|
||||
const later = () => {
|
||||
timeout = undefined;
|
||||
if (!immediate) func.apply(this, args);
|
||||
};
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(this, args);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {object} NavigationListItem
|
||||
* @property {HTMLElement} headline
|
||||
@@ -5,12 +29,17 @@
|
||||
* @property {number} top
|
||||
*/
|
||||
|
||||
/**
|
||||
* @element rocket-navigation
|
||||
* @attr {Boolean} no-redirects - if set, will not redirect to first child of nav category when clicking on category header.
|
||||
*/
|
||||
export class RocketNavigation extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
/** @type NavigationListItem[] */
|
||||
this.list = [];
|
||||
this.__scrollHandler = this.__scrollHandler.bind(this);
|
||||
this.__clickHandler = this.__clickHandler.bind(this);
|
||||
this.__scrollHandler = debounce(this.__scrollHandler.bind(this), 25, true);
|
||||
this.__isSetup = false;
|
||||
}
|
||||
|
||||
@@ -20,27 +49,7 @@ export class RocketNavigation extends HTMLElement {
|
||||
}
|
||||
this.__isSetup = true;
|
||||
|
||||
this.addEventListener('click', ev => {
|
||||
const el = /** @type {HTMLElement} */ (ev.target);
|
||||
if (el.classList.contains('anchor')) {
|
||||
const anchor = /** @type {HTMLAnchorElement} */ (el);
|
||||
ev.preventDefault();
|
||||
this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
|
||||
// wait for closing animation to finish before start scrolling
|
||||
setTimeout(() => {
|
||||
const parsedUrl = new URL(anchor.href);
|
||||
document.location.hash = parsedUrl.hash;
|
||||
}, 250);
|
||||
}
|
||||
const links = el.parentElement?.querySelectorAll('ul a');
|
||||
if (links && links.length > 1) {
|
||||
const subLink = /** @type {HTMLAnchorElement} */ (links[1]);
|
||||
if (!subLink.classList.contains('anchor')) {
|
||||
ev.preventDefault();
|
||||
subLink.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.addEventListener('click', this.__clickHandler);
|
||||
|
||||
const anchors = /** @type {NodeListOf<HTMLAnchorElement>} */ (this.querySelectorAll(
|
||||
'li.current a.anchor',
|
||||
@@ -57,12 +66,41 @@ export class RocketNavigation extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: debounce
|
||||
window.addEventListener('scroll', this.__scrollHandler);
|
||||
window.addEventListener('scroll', this.__scrollHandler, { passive: true });
|
||||
|
||||
this.__scrollHandler();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} ev
|
||||
*/
|
||||
__clickHandler(ev) {
|
||||
const el = /** @type {HTMLElement} */ (ev.target);
|
||||
if (el.classList.contains('anchor')) {
|
||||
const anchor =
|
||||
el instanceof HTMLAnchorElement
|
||||
? el
|
||||
: /** @type{HTMLAnchorElement} */ (el.querySelector('a.anchor'));
|
||||
ev.preventDefault();
|
||||
this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
|
||||
// wait for closing animation to finish before start scrolling
|
||||
setTimeout(() => {
|
||||
const parsedUrl = new URL(anchor.href);
|
||||
document.location.hash = parsedUrl.hash;
|
||||
}, 250);
|
||||
}
|
||||
if (!this.hasAttribute('no-redirects')) {
|
||||
const links = el.parentElement?.querySelectorAll('ul a');
|
||||
if (links && links.length > 1) {
|
||||
const subLink = /** @type {HTMLAnchorElement} */ (links[1]);
|
||||
if (!subLink.classList.contains('anchor')) {
|
||||
ev.preventDefault();
|
||||
subLink.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
__scrollHandler() {
|
||||
for (const listObj of this.list) {
|
||||
listObj.top = listObj.headline.getBoundingClientRect().top;
|
||||
|
||||
@@ -58,7 +58,8 @@ describe('rocket-navigation', () => {
|
||||
expect(anchorSpy).to.not.be.called;
|
||||
});
|
||||
|
||||
it('will mark the currently "active" headline in the menu', async () => {
|
||||
it('will mark the currently "active" headline in the menu', async function () {
|
||||
this.timeout(5000);
|
||||
function addBlock(headline, length = 5) {
|
||||
return html`
|
||||
<h2 id="${headline}">${headline}</h2>
|
||||
@@ -96,20 +97,20 @@ describe('rocket-navigation', () => {
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
await aTimeout(0);
|
||||
await aTimeout(50);
|
||||
const anchorLis = wrapper.querySelectorAll('.menu-item.anchor');
|
||||
expect(anchorLis[0]).to.have.class('current');
|
||||
expect(anchorLis[1]).to.not.have.class('current');
|
||||
expect(anchorLis[2]).to.not.have.class('current');
|
||||
|
||||
document.querySelector('#middle').scrollIntoView();
|
||||
await aTimeout(20);
|
||||
await aTimeout(100);
|
||||
expect(anchorLis[0]).to.not.have.class('current');
|
||||
expect(anchorLis[1]).to.have.class('current');
|
||||
expect(anchorLis[2]).to.not.have.class('current');
|
||||
|
||||
document.querySelector('#bottom').scrollIntoView();
|
||||
await aTimeout(20);
|
||||
await aTimeout(100);
|
||||
expect(anchorLis[0]).to.not.have.class('current');
|
||||
expect(anchorLis[1]).to.not.have.class('current');
|
||||
expect(anchorLis[2]).to.have.class('current');
|
||||
|
||||
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
packages/playground/src/sample.js
Normal file
0
packages/playground/src/sample.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import chai from 'chai';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { createImportMapForLocalPackages } from '../src/createImportMapForLocalPackages.js';
|
||||
|
||||
const { expect } = chai;
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
describe('normalizeConfig', () => {
|
||||
it.only('makes sure essential settings are there', async () => {
|
||||
const importMap = await createImportMapForLocalPackages(['@rocket/launch']);
|
||||
|
||||
expect(importMap).to.deep.equal({
|
||||
imports: {
|
||||
"@rocket/launch/inline-notification-element": "http://localhost:8000/__wds-outside-root__/1/packages/launch/inline-notification/inline-notification.js"
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
24
packages/playground/tsconfig.json
Normal file
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"
|
||||
]
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
# @rocket/search
|
||||
|
||||
## 0.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 302227e: Add variable for border-radius of SearchCombobox
|
||||
|
||||
## 0.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/search",
|
||||
"version": "0.3.1",
|
||||
"version": "0.3.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
|
||||
@@ -112,7 +112,7 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
|
||||
return html`
|
||||
<rocket-search-combobox
|
||||
name="combo"
|
||||
label="Rocket Search"
|
||||
label="Search"
|
||||
@input=${ev => {
|
||||
this.search = ev.target.value;
|
||||
}}
|
||||
|
||||
@@ -138,7 +138,7 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
display: flex;
|
||||
border: 1px solid var(--rocket-search-input-border-color, #dfe1e5);
|
||||
box-shadow: none;
|
||||
border-radius: 24px;
|
||||
border-radius: var(--rocket-search-input-border-radius, 24px);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -103,7 +103,7 @@ export class RocketSearchOption extends LinkMixin(LionOption) {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<img class="icon" src=${getIcon(this.section)} />
|
||||
<img class="icon" src=${getIcon(this.section)} alt=${this.section} />
|
||||
<div class="choice-field__label">
|
||||
<div class="title">${unsafeHTML(this.title)}</div>
|
||||
<div class="text">${unsafeHTML(this.text)}</div>
|
||||
|
||||
@@ -3,9 +3,10 @@ import { rocketBlog } from '@rocket/blog';
|
||||
import { rocketSearch } from '@rocket/search';
|
||||
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
|
||||
|
||||
export default {
|
||||
/** @type {Partial<import("./packages/cli/types/main").RocketCliOptions>} */
|
||||
const config = {
|
||||
presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
|
||||
absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
|
||||
|
||||
// emptyOutputDir: false,
|
||||
};
|
||||
}
|
||||
export default config;
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@@ -1778,6 +1778,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
|
||||
integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
|
||||
|
||||
"@vanillawc/wc-monaco-editor@^1.10.12":
|
||||
version "1.10.12"
|
||||
resolved "https://registry.yarnpkg.com/@vanillawc/wc-monaco-editor/-/wc-monaco-editor-1.10.12.tgz#73ae976b27fecfbef034df0cd2ea3608f4457180"
|
||||
integrity sha512-UOFs6eCf30qWQE8J4+e6axlcoZAKfa/rOgcqMB70s7UvAzQYnE0zpbWmTyRPCG6ARmuHXDkaxjkG8DXywZfJDA==
|
||||
|
||||
"@web/browser-logs@^0.2.0":
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@web/browser-logs/-/browser-logs-0.2.0.tgz#3f39d59154bf668f0bce467026354ff2b9f3e06b"
|
||||
@@ -8744,6 +8749,11 @@ void-elements@^2.0.1:
|
||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
||||
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
|
||||
|
||||
wasm-flate@^1.0.2-browser:
|
||||
version "1.0.2-browser"
|
||||
resolved "https://registry.yarnpkg.com/wasm-flate/-/wasm-flate-1.0.2-browser.tgz#e10e758b37c3d38829b54809fa2fef853b48131c"
|
||||
integrity sha512-qpqOzvbKtgG/2Mb0DYXVPQ2nOrkKYoAQtpr4QZzgO8SMfKieeODUy2vomMnimQjH/K2RGWnw+kZmO8yf+Yh9qA==
|
||||
|
||||
wcwidth@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
|
||||
|
||||
Reference in New Issue
Block a user