Compare commits

..

10 Commits

Author SHA1 Message Date
github-actions[bot]
ff8b4c5cd5 Version Packages 2022-08-15 23:04:55 +02:00
Thomas Allmer
5122ea8639 chore: add docs & tests for link-text for headlines 2022-08-15 23:02:29 +02:00
Thomas Allmer
3032ba9b82 feat(engine): menus now support special characters in markdown headings 2022-08-15 23:02:29 +02:00
Thomas Allmer
93503ed309 feat(engine): HTML in headings will be ignored for the menu 2022-08-15 23:02:29 +02:00
George Raptis
77646abbee Fix documentation link 2022-08-15 14:54:42 +02:00
github-actions[bot]
9ae3966fef Version Packages 2022-08-14 22:51:30 +02:00
Thomas Allmer
09a47b43dc fix(engine): prevent fatal error because of simultaneous write to file 2022-08-14 22:48:10 +02:00
Thomas Allmer
42d794bdfc chore: remove drawer pkg & fix contribution link in README.md 2022-08-13 21:40:50 +02:00
github-actions[bot]
b8a1b45953 Version Packages 2022-08-13 18:36:55 +02:00
Thomas Allmer
379f08ff47 feat(engine): remove global dom shim workaround 2022-08-13 18:31:20 +02:00
51 changed files with 631 additions and 473 deletions

View File

@@ -28,7 +28,7 @@
<p align="center">
<a href="https://rocket.modern-web.dev">Website</a>
·
<a href="https://rocket.modern-web.dev/doc/">Documentation</a>
<a href="https://rocket.modern-web.dev/docs/">Documentation</a>
·
<a href="https://rocket.modern-web.dev/chat">Discord Community</a>
</p>
@@ -68,7 +68,7 @@ npx @rocket/create@latest
We are always looking for contributors of all skill levels! If you're looking to ease your way into the project, try out a [good first issue](https://github.com/modernweb-dev/rocket/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/next/CONTRIBUTING.md). Also, feel free to drop into [discord](https://rocket.modern-web.dev/chat) and say hi. 👋
If you are interested in helping contribute to Modern Web, please take a look at our [Contributing Guide](https://github.com/modernweb-dev/rocket/blob/main/CONTRIBUTING.md). Also, feel free to drop into [discord](https://rocket.modern-web.dev/chat) and say hi. 👋
### Financial Contributors

View File

@@ -14,7 +14,7 @@
"@rocket/cli": "^0.20.0",
"@rocket/engine": "^0.2.0",
"@webcomponents/template-shadowroot": "^0.1.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Hydration Starter",
"imports": {

View File

@@ -18,7 +18,7 @@
"devDependencies": {
"@rocket/cli": "^0.20.0",
"@rocket/engine": "^0.2.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Blog Starter"
}

View File

@@ -13,7 +13,7 @@
"devDependencies": {
"@rocket/cli": "^0.20.0",
"@rocket/engine": "^0.2.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Minimal Starter"
}

View File

@@ -18,7 +18,7 @@
"@sanity/client": "^3.1.0",
"@sanity/image-url": "^1.0.1",
"dotenv": "^16.0.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Sanity Minimal Starter"
}

View File

@@ -15,7 +15,7 @@
"@rocket/components": "^0.2.0",
"@rocket/engine": "^0.2.0",
"@rocket/spark": "^0.2.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Landing Page (@rocket/spark Theme)",
"imports": {

View File

@@ -15,7 +15,7 @@
"@rocket/engine": "^0.2.0",
"@rocket/launch": "^0.21.0",
"@rocket/search": "^0.7.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"@rocket/template-name": "Documentation Website (@rocket/launch Theme)",
"imports": {

View File

@@ -30,7 +30,7 @@
"rocket:build": "NODE_DEBUG=engine:rendering node --trace-warnings packages/cli/src/cli.js build",
"rocket:upgrade": "node packages/cli/src/cli.js upgrade",
"search": "node packages/cli/src/cli.js search",
"setup": "npm run setup:ts-configs && npm run setup:patches",
"setup": "npm run setup:ts-configs",
"setup:patches": "npx patch-package",
"setup:ts-configs": "node scripts/generate-ts-configs.mjs",
"start:experimental": "NODE_DEBUG=engine:rendering node --no-warnings --experimental-loader ./packages/engine/src/litCssLoader.js packages/cli/src/cli.js start --open",

View File

@@ -43,7 +43,7 @@
"dependencies": {
"@webcomponents/template-shadowroot": "^0.1.0",
"fontawesome-free": "^1.0.4",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"devDependencies": {},
"types": "./dist-types/exports/index.d.ts",

View File

@@ -1,37 +0,0 @@
# @rocket/drawer
## 0.1.5
### Patch Changes
- 1f14105: Add export map which enables side effect import via `@rocket/drawer/define`
## 0.1.4
### Patch Changes
- 445b028: Update to latest lit, @open-wc, @lion packages
## 0.1.3
### Patch Changes
- 0b64116: Update @lion dependencies
## 0.1.2
### Patch Changes
- 897892d: bump dependencies
## 0.1.1
### Patch Changes
- d955b43: reset translation on teardown overlay controller
## 0.1.0
### Minor Changes
- 1971f5d: Initial Release

View File

@@ -1,7 +0,0 @@
# Rocket Drawer
For mobile navigation on [Rocket sites](https://rocket.modern-web.dev/).
--
Inspired by [kenchris's menu-drawer](https://github.com/kenchris/websensor-compass/blob/master/scripts/menu-drawer.js).

View File

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

View File

@@ -1,45 +0,0 @@
{
"name": "@rocket/drawer",
"version": "0.1.5",
"publishConfig": {
"access": "public"
},
"description": "Rocket stuff",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/modernweb-dev/rocket.git",
"directory": "packages/drawer"
},
"author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
"main": "index.js",
"exports": {
".": "./index.js",
"./rocket-drawer.js": "./rocket-drawer.js",
"./define": "./rocket-drawer.js"
},
"scripts": {
"dev": "web-dev-server --node-resolve --root-dir ../../ --open packages/drawer/ --watch",
"rocket:build": "node src/build/cli.js -c demo/docs",
"rocket:start": "node src/start/cli.js -c demo/docs --root-dir ../../ --open packages/cli/demo/docs/README.md",
"start": "npm run rocket:start",
"test": "mocha test-node/**/*.test.js test-node/*.test.js",
"test:watch": "mocha test-node/**/*.test.js test-node/*.test.js --watch"
},
"files": [
"*.js",
"dist-types",
"src"
],
"keywords": [
"storybook",
"demo",
"demo-states",
"testing"
],
"dependencies": {
"@lion/overlays": "^0.32.0",
"lit": "^2.0.0"
},
"types": "dist-types/index.d.ts"
}

View File

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

View File

@@ -1,264 +0,0 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { LitElement, html } from 'lit-element';
import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
/** @typedef {import('@lion/overlays/types/OverlayConfig').OverlayConfig} OverlayConfig */
/**
* @param {HTMLElement} el
*/
function transitionend(el) {
return new Promise(resolve => {
el.addEventListener('transitionend', resolve, { once: true });
});
}
// @ts-expect-error
export class RocketDrawer extends OverlayMixin(LitElement) {
static get properties() {
return {
useOverlay: { type: Boolean, reflect: true },
useOverlayMediaQuery: { type: String },
mediaMatcher: { type: Object },
};
}
// eslint-disable-next-line class-methods-use-this
// @ts-ignore
_defineOverlayConfig() {
return /** @type {OverlayConfig} */ {
...withModalDialogConfig(),
hidesOnOutsideClick: true,
viewportConfig: {
placement: 'slide',
},
};
}
_setupOverlayCtrl() {
if (this.useOverlay) {
super._setupOverlayCtrl();
/* eslint-disable no-param-reassign */
this._overlayCtrl.transitionHide = async ({ contentNode }) => {
contentNode.style.transition = 'transform 0.20s cubic-bezier(0.4, 0.0, 0.2, 1)';
contentNode.style.transform = 'translateX(-100%)';
await transitionend(contentNode);
// contentNode.style.display = 'none';
};
this._overlayCtrl.transitionShow = async ({ contentNode }) => {
contentNode.style.display = 'block';
contentNode.style.transform = 'translateX(-100%)';
contentNode.style.transition = 'transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1)';
// wait for display block to be "updated in the dom" and then translate otherwise there will be no animation
await new Promise(resolve => requestAnimationFrame(resolve));
await new Promise(resolve => requestAnimationFrame(resolve));
contentNode.style.transform = 'translateX(0)';
await transitionend(contentNode);
};
/* eslint-enable no-param-reassign */
this._overlayCtrl.contentNode.style.transform = 'translateX(-100%)';
this._overlayCtrl.contentNode.style.willChange = 'transform';
// gesture
this.containerEl = this._overlayCtrl.contentNode;
}
}
_teardownOverlayCtrl() {
super._teardownOverlayCtrl();
this._overlayCtrl.contentNode.style.transform = 'translateX(0)';
}
/** @param {import('lit-element').PropertyValues } changedProperties */
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('opened')) {
if (this.opened) {
document.body.addEventListener('touchstart', this.onGestureStart, { passive: true });
} else {
document.body.removeEventListener('touchstart', this.onGestureStart);
}
}
if (changedProperties.has('useOverlay')) {
if (this.useOverlay) {
this._setupOverlayCtrl();
} else {
if (this._overlayCtrl) {
this._teardownOverlayCtrl();
}
}
}
if (changedProperties.has('useOverlayMediaQuery')) {
this.mediaMatcher.removeEventListener('change', this.onMatchMedia);
this.mediaMatcher = window.matchMedia(this.useOverlayMediaQuery);
this.mediaMatcher.addEventListener('change', this.onMatchMedia);
this.useOverlay = !!this.mediaMatcher.matches;
}
}
/**
* @param { MediaQueryListEvent } query
*/
onMatchMedia(query) {
this.useOverlay = !!query.matches;
}
_setupOpenCloseListeners() {
super._setupOpenCloseListeners();
if (this._overlayInvokerNode) {
this._overlayInvokerNode.addEventListener('click', this.__toggle);
}
}
_teardownOpenCloseListeners() {
super._teardownOpenCloseListeners();
if (this._overlayInvokerNode) {
this._overlayInvokerNode.removeEventListener('click', this.__toggle);
}
}
__toggle() {
this.opened = !this.opened;
}
// ********************* GESTURE ***********************
constructor() {
super();
this.useOverlay = false;
this.useOverlayMediaQuery = '(max-width: 1024px)';
this.__toggle = this.__toggle.bind(this);
this.onMatchMedia = this.onMatchMedia.bind(this);
this.onGestureStart = this.onGestureStart.bind(this);
this.onGestureMove = this.onGestureMove.bind(this);
this.onGestureEnd = this.onGestureEnd.bind(this);
this.updateFromTouch = this.updateFromTouch.bind(this);
this.mediaMatcher = window.matchMedia(this.useOverlayMediaQuery);
this.mediaMatcher.addEventListener('change', this.onMatchMedia);
this._startX = 0;
this._currentX = 0;
this._velocity = 0;
this._left = 0;
this.__touching = false;
this._timestamp = 0;
}
connectedCallback() {
super.connectedCallback();
this.useOverlay = !!this.mediaMatcher.matches;
}
render() {
return html`
<slot name="invoker"></slot>
<slot name="_overlay-shadow-outlet"></slot>
<div id="overlay-content-node-wrapper">
<slot name="content"></slot>
</div>
`;
}
/**
* @param {TouchEvent} ev
*/
onGestureStart(ev) {
if (!this.containerEl) {
return;
}
this.__touching = true;
this._left = this.containerEl.getBoundingClientRect().left;
this._startX = ev.targetTouches[0].clientX;
this._currentX = this._startX;
this._timestamp = new Date().getTime();
this._velocity = 0;
this._overlayCtrl.contentNode.style.transition = '';
document.body.addEventListener('touchmove', this.onGestureMove, { passive: true });
document.body.addEventListener('touchend', this.onGestureEnd, { passive: true });
document.body.addEventListener('touchcancel', this.onGestureEnd, { passive: true });
requestAnimationFrame(this.updateFromTouch);
}
/**
* @param {number} dDist
* @param {number} dTime
*/
addVelocitySample(dDist, dTime) {
if (dTime === 0) {
return;
}
const velocitySample = dDist / dTime;
// Low pass filter.
const alpha = 0.75;
this._velocity *= alpha;
this._velocity += (1 - alpha) * velocitySample;
}
/**
* @param {TouchEvent} ev
*/
onGestureMove(ev) {
if (!this.__touching) {
return;
}
const lastTimestamp = this._timestamp;
this._timestamp = new Date().getTime();
const dTime = this._timestamp - lastTimestamp;
const lastX = this._currentX;
this._currentX = ev.targetTouches[0].clientX;
const dX = this._currentX - lastX;
this.addVelocitySample(dX, dTime);
}
onGestureEnd() {
if (!this.__touching || !this.containerEl) {
this.opened = false;
return;
}
this.__touching = false;
let endOpenedState;
// Check for fling.
if (Math.abs(this._velocity) > 1) {
endOpenedState = this._velocity > 0;
} else {
// Check depending on percentage visible.
const { left } = this.containerEl.getBoundingClientRect();
const width = this.containerEl.clientWidth;
const percentageVisible = (left + width) / width;
endOpenedState = percentageVisible >= 0.5;
}
this._overlayCtrl.contentNode.style.transition =
'transform 0.20s cubic-bezier(0.4, 0.0, 0.2, 1)';
this.containerEl.style.transform = '';
this.opened = endOpenedState;
document.body.removeEventListener('touchmove', this.onGestureMove);
document.body.removeEventListener('touchend', this.onGestureEnd);
document.body.removeEventListener('touchcancel', this.onGestureEnd);
}
updateFromTouch() {
if (!this.__touching || !this.containerEl) {
return;
}
requestAnimationFrame(this.updateFromTouch);
const translateX = Math.min(0, this._currentX - this._startX + this._left);
this.containerEl.style.transform = `translateX(${translateX}px)`;
}
}

View File

@@ -1,24 +0,0 @@
// 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"
]
}

View File

@@ -1,5 +1,42 @@
# @rocket/engine
## 0.2.5
### Patch Changes
- 93503ed: HTML in headings will be ignored for the menu
Some examples:
- `<h1>Hello <em>Word</em></h1>` => `Hello Word`
- `<h1>Hello <strong>World</strong> of <span>JS <em>(JavaScript)</em></span>!</h1>` => `Hello World of JS (JavaScript)!`
- 3032ba9: Menus now support special characters in markdown headings.
Examples:
```md
# Fun Errors & Feedback
# &lt;some-button>
```
## 0.2.4
### Patch Changes
- 09a47b4: Prevent fatal error because of simultaneous write to file.
When the browser requested a file to be rendered and that file also needed an update in the "rocket header" (the top of the file) then it could be that the watcher trigger a simultaneous render of the file while the first render was still in progress.
The solution is that the watcher ignores changes to a file until a full render is finished.
## 0.2.3
### Patch Changes
- 379f08f: Remove the lit workaround to globally load the `global-dom-shim` in the "main thread".
Which means only the worker that does the actual SSR rendering will load it.
## 0.2.2
### Patch Changes

View File

@@ -1,6 +1,6 @@
{
"name": "@rocket/engine",
"version": "0.2.2",
"version": "0.2.5",
"publishConfig": {
"access": "public"
},
@@ -35,7 +35,7 @@
"scripts": {
"debug": "DEBUG=engine:rendering yarn test",
"debug:integration": "PWDEBUG=1 yarn test:integration",
"test": "mocha --require ../../scripts/testMochaGlobalHooks.js --timeout 5000 test-node/**/*.test.js test-node/*.test.js",
"test": "mocha --require ../../scripts/testMochaGlobalHooks.js --timeout 8000 test-node/**/*.test.js test-node/*.test.js",
"test:integration": "playwright test test-node/*.spec.js",
"test:watch": "onchange 'src/**/*.js' 'test-node/**/*.js' -- npm test",
"types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/"
@@ -47,12 +47,12 @@
],
"dependencies": {
"@d4kmor/tree-model": "^0.1.3",
"@lit-labs/ssr": "^2.0.4",
"@lit-labs/ssr": "^2.2.3",
"@mdjs/core": "^0.20.0",
"@parcel/watcher": "^2.0.5",
"@web/dev-server": "^0.1.4",
"es-module-lexer": "^0.10.5",
"lit": "^2.2.5",
"lit": "^2.3.0",
"plugins-manager": "^0.3.0",
"sax-wasm": "^2.1.3",
"unist-util-visit": "^4.1.0"

View File

@@ -444,7 +444,9 @@ export class Engine {
}
return result;
}
if (this.watcher) {
this.watcher.addFileToIgnore(sourceFilePath);
}
if (rocketHeader) {
const { needsAnotherRenderingPass } = await rocketHeader.syncComponents({
outputFileContent: result.fileContent,
@@ -460,6 +462,9 @@ export class Engine {
}
}
if (this.watcher) {
this.watcher.removeFileToIgnore(sourceFilePath);
}
return result;
}
}

View File

@@ -78,6 +78,11 @@ export class Watcher {
acceptPageUpdates = true;
/**
* @type {Set<string>}
*/
_filesToIgnore = new Set();
/**
* @type {Map<string, { type: string, jsDependencies?: string[], webSockets?: Set<import('@web/dev-server-core').WebSocket> }>}
*/
@@ -96,6 +101,9 @@ export class Watcher {
async (err, events) => {
if (this.acceptPageUpdates) {
for (const event of events) {
if (this.isIgnoredFile(event.path)) {
return;
}
if (event.type === 'create') {
await this.addCreateTask(event.path);
}
@@ -109,6 +117,9 @@ export class Watcher {
await this.executeTaskQueue();
} else {
for (const event of events) {
if (this.isIgnoredFile(event.path)) {
return;
}
if (
this._taskQueue.has(event.path) ||
// we exclude files here as `@parcel/watcher` does not support globs in `ignore`
@@ -340,4 +351,26 @@ export class Watcher {
this._taskQueue.clear();
this.acceptPageUpdates = true;
}
/**
* @param {string} filePath
*/
addFileToIgnore(filePath) {
this._filesToIgnore.add(filePath);
}
/**
* @param {string} filePath
*/
removeFileToIgnore(filePath) {
this._filesToIgnore.delete(filePath);
}
/**
* @param {string} filePath
* @returns {boolean}
*/
isIgnoredFile(filePath) {
return this._filesToIgnore.has(filePath);
}
}

View File

@@ -1,7 +1,3 @@
// we need to load the global-dom-shim as otherwise import { html } from 'lit'; breaks
// https://github.com/lit/lit/issues/2524
import '@lit-labs/ssr/lib/install-global-dom-shim.js';
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import { mdjsProcess } from '@mdjs/core';

View File

@@ -1,7 +1,3 @@
// we need to load the global-dom-shim as otherwise import { html } from 'lit'; breaks
// https://github.com/lit/lit/issues/2524
import '@lit-labs/ssr/lib/install-global-dom-shim.js';
export { renderJoiningGroup } from './helpers/renderJoiningGroup.js';
export { inlineFile } from './helpers/inlineFile.js';

View File

@@ -29,9 +29,23 @@ export function getHtmlMetaData(htmlFilePath) {
// headlinesWithId: [],
};
/** @type {string | undefined} */
let capturedHeadlineText = undefined;
parser.eventHandler = (ev, _data) => {
if (ev === SaxEventType.OpenTag) {
const data = /** @type {Tag} */ (/** @type {any} */ (_data));
if (isHeadline(data)) {
capturedHeadlineText = '';
}
}
if (capturedHeadlineText !== undefined && ev === SaxEventType.Text) {
const data = /** @type {Text} */ (/** @type {any} */ (_data));
capturedHeadlineText += data.value;
}
if (ev === SaxEventType.CloseTag) {
const data = /** @type {Tag} */ (/** @type {any} */ (_data));
// ********** <meta name="*" content="*">
if (data.name === 'meta') {
const metaName = getAttribute(data, 'name');
if (metaName === 'menu:link.text') {
@@ -63,26 +77,32 @@ export function getHtmlMetaData(htmlFilePath) {
if (!metaData.title && data.name === 'title') {
metaData.title = getText(data);
}
if (!metaData.h1 && data.name === 'h1') {
metaData.h1 = getText(data);
}
// ********** <h1> - <h6>
if (isHeadline(data)) {
const id = getAttribute(data, 'id');
const rawText = getText(data);
const linkText = getAttribute(data, 'link-text');
if (id && rawText) {
const processedCapturedHeadlineText = capturedHeadlineText
?.replace(/&#x3C;/g, '&lt;')
.replace(/&#x26;/g, '&')
.trim();
const text = linkText || processedCapturedHeadlineText || '';
if (data.name === 'h1') {
metaData.h1 = text;
}
if (id && text) {
if (!metaData.headlinesWithId) {
metaData.headlinesWithId = [];
}
const rawTextObj = linkText ? { rawText } : {};
const rawTextObj = linkText ? { rawText: processedCapturedHeadlineText } : {};
metaData.headlinesWithId.push({
text: linkText || rawText,
text,
id,
level: parseInt(data.name[1], 10),
...rawTextObj,
});
}
capturedHeadlineText = undefined;
}
}
};
@@ -97,6 +117,7 @@ export function getHtmlMetaData(htmlFilePath) {
});
readable.on('end', () => {
parser.end();
capturedHeadlineText = undefined;
resolve(metaData);
});

View File

@@ -9,6 +9,9 @@ const require = createRequire(import.meta.url);
export const streamOptions = { highWaterMark: 128 * 1024 };
const saxPath = require.resolve('sax-wasm/lib/sax-wasm.wasm');
const saxWasmBuffer = await readFile(saxPath);
export const parser = new SAXParser(SaxEventType.CloseTag, streamOptions);
export const parser = new SAXParser(
SaxEventType.OpenTag | SaxEventType.CloseTag | SaxEventType.Text,
streamOptions,
);
await parser.prepareWasm(saxWasmBuffer);

View File

@@ -1,7 +1,3 @@
// we need to load the global-dom-shim as otherwise import { html } from 'lit'; breaks
// https://github.com/lit/lit/issues/2524
import '@lit-labs/ssr/lib/install-global-dom-shim.js';
import { parentPort } from 'worker_threads';
// import { convertMdFile, convertHtmlFile } from '../converts.js';

View File

@@ -1,7 +1,3 @@
// we need to load the global-dom-shim as otherwise import { html } from 'lit'; breaks
// https://github.com/lit/lit/issues/2524
import '@lit-labs/ssr/lib/install-global-dom-shim.js';
import path from 'path';
import { parentPort } from 'worker_threads';
import { mkdir, writeFile } from 'fs/promises';

View File

@@ -1,5 +1,4 @@
import chai from 'chai';
// import '@lit-labs/ssr/lib/install-global-dom-shim.js';
import { html } from 'lit';
import { renderJoiningGroup } from '../src/helpers/renderJoiningGroup.js';
import { testLitServerRender } from './test-helpers.js';

View File

@@ -834,4 +834,99 @@ describe('Engine menus', () => {
await cleanup();
});
it('14: get-all-text-but-strip-html', async () => {
const { build, readSource } = await setupTestEngine(
'fixtures/05-menu/14-get-all-text-but-strip-html/docs',
);
await build();
expect(JSON.parse(readSource('pageTreeData.rocketGenerated.json'))).to.deep.equal({
h1: 'Hello World of JS (JavaScript)!',
name: 'Hello World of JS (JavaScript)!',
menuLinkText: 'Hello World of JS (JavaScript)!',
url: '/',
outputRelativeFilePath: 'index.html',
sourceRelativeFilePath: 'index.rocket.js',
level: 0,
});
});
it('15: markdown special characters', async () => {
const { build, readSource } = await setupTestEngine(
'fixtures/05-menu/15-md-special-characters/docs',
);
await build();
expect(JSON.parse(readSource('pageTreeData.rocketGenerated.json'))).to.deep.equal({
children: [
{
h1: '&lt;some-button>',
headlinesWithId: [
{
id: 'some-button',
level: 1,
text: '&lt;some-button>',
},
],
level: 1,
menuLinkText: '&lt;some-button>',
name: '&lt;some-button>',
outputRelativeFilePath: 'component/index.html',
sourceRelativeFilePath: 'component.rocket.md',
url: '/component/',
},
],
h1: 'Fun Errors & Feedback',
headlinesWithId: [
{
id: 'fun-errors--feedback',
level: 1,
text: 'Fun Errors & Feedback',
},
],
level: 0,
menuLinkText: 'Fun Errors & Feedback',
name: 'Fun Errors & Feedback',
outputRelativeFilePath: 'index.html',
sourceRelativeFilePath: 'index.rocket.md',
url: '/',
});
});
it('15: link-text attribute', async () => {
const { build, readSource } = await setupTestEngine(
'fixtures/05-menu/16-link-text-attribute/docs',
);
await build();
expect(JSON.parse(readSource('pageTreeData.rocketGenerated.json'))).to.deep.equal({
h1: 'Home',
headlinesWithId: [
{
id: 'home',
level: 1,
rawText: 'Welcome to Rocket',
text: 'Home',
},
{
id: 'first',
level: 2,
text: 'First',
},
{
id: 'second',
level: 2,
rawText: 'Second is best',
text: 'Second',
},
],
level: 0,
menuLinkText: 'Home',
name: 'Home',
outputRelativeFilePath: 'index.html',
sourceRelativeFilePath: 'index.rocket.js',
url: '/',
});
});
});

View File

@@ -114,4 +114,77 @@ describe('Engine start error handling', () => {
);
await cleanup();
});
it('04: update-header-while-rendering', async () => {
const {
readOutput,
writeSource,
cleanup,
engine,
setAsOpenedInBrowser,
outputExists,
anEngineEvent,
} = await setupTestEngine(
'fixtures/09b-watch-error-handling/04-update-header-while-rendering/docs',
);
expect(outputExists('index.html')).to.be.false;
await engine.start();
setAsOpenedInBrowser('index.rocket.js');
await writeSource(
'index.rocket.js',
[
'/* START - Rocket auto generated - do not touch */',
"export const sourceRelativeFilePath = 'index.rocket.js';",
"import { html, components, layout } from './recursive.data.js';",
'export { html, components, layout };',
'export async function registerCustomElements() {',
' // hydrate-able components',
" customElements.define('hello-typer', await import('#c/HelloTyper.js').then(m => m.HelloTyper));",
'}',
'export const needsLoader = true;',
'/* END - Rocket auto generated - do not touch */',
'',
'export default () => html`',
' <h1>Hello World</h1>',
' <hello-typer loading="hydrate:onVisible"></hello-typer>',
'`;',
].join('\n'),
);
await anEngineEvent('rocketUpdated');
expect(readOutput('index.html')).to.equal(
[
'<!DOCTYPE html>',
'<html lang="en">',
' <head>',
' <meta charset="utf-8" />',
' </head>',
' <body>',
' <h1>Hello World</h1>',
' <hello-typer loading="hydrate:onVisible"',
' ><template shadowroot="open"',
' ><style>',
' button {',
' font-size: 200%;',
' width: 64px;',
' height: 64px;',
' border: none;',
' border-radius: 10px;',
' background-color: seagreen;',
' color: white;',
' }',
' </style>',
' <p>🤔 Hello <span> </span></p>',
' <button>+</button>',
' </template></hello-typer',
' >',
' <script type="module" src="index-loader-generated.js"></script>',
' </body>',
'</html>',
].join('\n'),
);
await cleanup();
});
});

View File

@@ -1,15 +1,15 @@
{
"title": "Fixed Title",
"h1": "\n Welcome Members:\n ",
"h1": "Welcome Members:",
"headlinesWithId": [
{
"text": "\n Welcome Members:\n ",
"text": "Welcome Members:",
"id": "welcome-members",
"level": 1
}
],
"name": "Fixed Title",
"menuLinkText": "\n Welcome Members:\n ",
"menuLinkText": "Welcome Members:",
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.js",

View File

@@ -0,0 +1,11 @@
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'index.rocket.js';
import { layout, html } from './recursive.data.js';
export { layout, html };
/* END - Rocket auto generated - do not touch */
export default () =>
html`<h1>
Hello <strong>World</strong> of <span>JS <em>(JavaScript)</em></span
>!
</h1>`;

View File

@@ -0,0 +1,9 @@
{
"h1": "Hello World of JS (JavaScript)!",
"name": "Hello World of JS (JavaScript)!",
"menuLinkText": "Hello World of JS (JavaScript)!",
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.js",
"level": 0
}

View File

@@ -0,0 +1,18 @@
import { PageTree, SiteMenu } from '@rocket/engine';
import { html } from 'lit';
const pageTree = new PageTree({
inputDir: new URL('./', import.meta.url),
outputDir: new URL('../__output', import.meta.url),
});
await pageTree.restore();
export const layout = data => {
return html`
${pageTree.renderMenu(new SiteMenu(), data.sourceRelativeFilePath)}
<main>${data.content()}</main>
`;
};
export { html };

View File

@@ -0,0 +1,9 @@
```js server
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'component.rocket.md';
import { layout, html } from './recursive.data.js';
export { layout, html };
/* END - Rocket auto generated - do not touch */
```
# &lt;some-button>

View File

@@ -0,0 +1,9 @@
```js server
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'index.rocket.md';
import { layout, html } from './recursive.data.js';
export { layout, html };
/* END - Rocket auto generated - do not touch */
```
# Fun Errors & Feedback

View File

@@ -0,0 +1,34 @@
{
"h1": "Fun Errors & Feedback",
"headlinesWithId": [
{
"text": "Fun Errors & Feedback",
"id": "fun-errors--feedback",
"level": 1
}
],
"name": "Fun Errors & Feedback",
"menuLinkText": "Fun Errors & Feedback",
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.md",
"level": 0,
"children": [
{
"h1": "&lt;some-button>",
"headlinesWithId": [
{
"text": "&lt;some-button>",
"id": "some-button",
"level": 1
}
],
"name": "&lt;some-button>",
"menuLinkText": "&lt;some-button>",
"url": "/component/",
"outputRelativeFilePath": "component/index.html",
"sourceRelativeFilePath": "component.rocket.md",
"level": 1
}
]
}

View File

@@ -0,0 +1,18 @@
import { PageTree, SiteMenu } from '@rocket/engine';
import { html } from 'lit';
const pageTree = new PageTree({
inputDir: new URL('./', import.meta.url),
outputDir: new URL('../__output', import.meta.url),
});
await pageTree.restore();
export const layout = data => {
return html`
${pageTree.renderMenu(new SiteMenu(), data.sourceRelativeFilePath)}
<main>${data.content()}</main>
`;
};
export { html };

View File

@@ -0,0 +1,11 @@
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'index.rocket.js';
import { layout, html } from './recursive.data.js';
export { layout, html };
/* END - Rocket auto generated - do not touch */
export default () => html`
<h1 id="home" link-text="Home">Welcome to Rocket</h1>
<h2 id="first">First</h2>
<h2 link-text="Second" id="second">Second is best</h2>
`;

View File

@@ -0,0 +1,28 @@
{
"h1": "Home",
"headlinesWithId": [
{
"text": "Home",
"id": "home",
"level": 1,
"rawText": "Welcome to Rocket"
},
{
"text": "First",
"id": "first",
"level": 2
},
{
"text": "Second",
"id": "second",
"level": 2,
"rawText": "Second is best"
}
],
"name": "Home",
"menuLinkText": "Home",
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.js",
"level": 0
}

View File

@@ -0,0 +1,18 @@
import { PageTree, SiteMenu } from '@rocket/engine';
import { html } from 'lit';
const pageTree = new PageTree({
inputDir: new URL('./', import.meta.url),
outputDir: new URL('../__output', import.meta.url),
});
await pageTree.restore();
export const layout = data => {
return html`
${pageTree.renderMenu(new SiteMenu(), data.sourceRelativeFilePath)}
<main>${data.content()}</main>
`;
};
export { html };

View File

@@ -0,0 +1,54 @@
import { LitElement, html, css } from 'lit';
let i = 0;
const fullText = [...'to this wonderful world of progressive hydration 🤯'];
export class HelloTyper extends LitElement {
static properties = {
msg: { type: String },
counter: { type: Number },
};
constructor() {
super();
this.msg = ' ';
this.counter = 0;
}
updated(changedProperties) {
super.updated(changedProperties);
if (i < fullText.length) {
setTimeout(() => {
this.msg += fullText[i];
i += 1;
}, Math.floor(Math.random() * 50) + 40);
}
}
render() {
return html`
<p>🤔 Hello <span>${this.msg}</span>${'🤯'.repeat(this.counter)}</p>
<button @click=${this._inc}>+</button>
`;
}
_inc() {
if (i >= fullText.length) {
this.counter += 1;
}
}
static styles = [
css`
button {
font-size: 200%;
width: 64px;
height: 64px;
border: none;
border-radius: 10px;
background-color: seagreen;
color: white;
}
`,
];
}

View File

@@ -0,0 +1,15 @@
/* START - Rocket auto generated - do not touch */
export const sourceRelativeFilePath = 'index.rocket.js';
import { html, components, layout } from './recursive.data.js';
export { html, components, layout };
export async function registerCustomElements() {
// hydrate-able components
customElements.define('hello-typer', await import('#c/HelloTyper.js').then(m => m.HelloTyper));
}
export const needsLoader = true;
/* END - Rocket auto generated - do not touch */
export default () => html`
<h1>Hello World</h1>
<hello-typer loading="hydrate:onVisible"></hello-typer>
`;

View File

@@ -0,0 +1,22 @@
{
"url": "/",
"outputRelativeFilePath": "index.html",
"sourceRelativeFilePath": "index.rocket.js",
"level": 0,
"children": [
{
"url": "/about/",
"outputRelativeFilePath": "about/index.html",
"sourceRelativeFilePath": "about.rocket.js",
"level": 1
}
],
"menuLinkText": "Hello World",
"name": "Hello World",
"title": "name is not defined",
"h1": "Hello World",
"components": {
"hello-typer": "#c/HelloTyper.js::HelloTyper"
},
"needsLoader": true
}

View File

@@ -0,0 +1,19 @@
import { html } from 'lit';
export { html };
export const components = {
'hello-typer': '#c/HelloTyper.js::HelloTyper',
};
export const layout = data => html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
${data.content()}
</body>
</html>
`;

View File

@@ -0,0 +1,7 @@
{
"name": "@test/components",
"type": "module",
"imports": {
"#c/*": "./components/*"
}
}

View File

@@ -50,7 +50,7 @@
"@rocket/components": "^0.2.0",
"@rocket/engine": "^0.2.0",
"@webcomponents/template-shadowroot": "^0.1.0",
"lit": "^2.2.5",
"lit": "^2.3.0",
"workbox-window": "^6.1.5"
},
"types": "./dist-types/src/index.d.ts",

View File

@@ -36,7 +36,7 @@
"dependencies": {
"@lion/accordion": "^0.9.0",
"@open-wc/scoped-elements": "^2.0.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"types": "dist-types/index.d.ts"
}

View File

@@ -31,7 +31,7 @@
"src"
],
"dependencies": {
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"types": "dist-types/index.d.ts"
}

View File

@@ -42,7 +42,7 @@
"dependencies": {
"@rocket/components": "^0.2.0",
"@rocket/engine": "^0.2.0",
"lit": "^2.2.5"
"lit": "^2.3.0"
},
"devDependencies": {},
"types": "./dist-types/src/index.d.ts",

View File

@@ -85,22 +85,22 @@ In most cases you probably will not need to do anything as it will take the text
So if you have a page like this:
```md
# Hello World
# Learning Rocket
```
then it will be called "Hello World" in the menu.
then it will be called "Learning Rocket" in the menu.
You can overwrite that by using the property `menuLinkText`;
````md
```js server
export const menuLinkText = 'Hello';
export const menuLinkText = 'Docs';
```
# Hello World
# Learning Rocket
````
Now the menu will be called "Hello".
Now the menu will be called "Docs".
Within a menu the text of the links is defined by the following priority:
@@ -111,6 +111,32 @@ Within a menu the text of the links is defined by the following priority:
You can influence that data that gets provided to the menu by setting exports.
### link-text="..."
If you want to rename the menu text you can use the attribute `link-text`.
It works on your h1 for the page title as well as on your h2-h6 for a table of contents menu.
Examples:
```html
<h1 link-text="Docs">Learning Rocket</h1>
<h2 link-text="Contact">Write us a message</h2>
```
<inline-notification>
You can use HTML within markdown too!
</inline-notification>
## Headings with HTML
HTML in headings will be ignored for the menu
Some examples:
- `<h1>Hello <em>Word</em></h1>` => `Hello Word`
- `<h1>Hello <strong>World</strong> of <span>JS <em>(JavaScript)</em></span>!</h1>` => `Hello World of JS (JavaScript)!`
## Menu No Link
Often you have sections or groups of pages which you want to provide a heading for.

View File

@@ -1248,15 +1248,6 @@
"@open-wc/scoped-elements" "^2.1.1"
lit "^2.0.2"
"@lion/overlays@^0.32.0":
version "0.32.0"
resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.32.0.tgz#d9c7d0bfd7895768efcf9bcc65a97e330bdcf424"
integrity sha512-VyHilarcgWYYM+NDNXxuAiAT8EHipJUHNiaV85OLzwgqqMFC5TsG9wyekqj5iu3mk96R4s/RU1gjqfR9O88INQ==
dependencies:
"@lion/core" "^0.22.0"
"@popperjs/core" "^2.5.4"
singleton-manager "^1.4.3"
"@lit-labs/ssr-client@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@lit-labs/ssr-client/-/ssr-client-1.0.1.tgz#b97e121184aa201bbe6f165f3a7dc919f67129a2"
@@ -1266,25 +1257,25 @@
lit "^2.0.0"
lit-html "^2.0.0"
"@lit-labs/ssr@^2.0.4":
version "2.2.2"
resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-2.2.2.tgz#545ce760d4f3d50459221f56e516ad1c0bf5d1cd"
integrity sha512-pWyZurpOeOxueS5EXdWkZTM9fBEHfR70WJ3dAn4oE4iWRLpt6mwx9GvUWQF0oKHqi0tQP/WjfTRf+nafWWSTfw==
"@lit-labs/ssr@^2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-2.2.3.tgz#8f9cc343ebf531dd670136d342562bee33ce9be0"
integrity sha512-QOHZGR5a6znwqa8wM5hpMdlfO/fXUh0LYV39b16TEGtnszhGlKECx4+w9RiBuwOj/Qb5/SHGKpr81APRevWGeg==
dependencies:
"@lit-labs/ssr-client" "^1.0.0"
"@lit/reactive-element" "^1.1.0"
"@lit/reactive-element" "^1.4.0"
"@types/node" "^16.0.0"
lit "^2.1.0"
lit "^2.3.0"
lit-element "^3.1.0"
lit-html "^2.1.0"
lit-html "^2.3.0"
node-fetch "^3.2.8"
parse5 "^6.0.1"
resolve "^1.10.1"
"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0":
version "1.3.4"
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.4.tgz#c4492a54387f7b1020d498a348403229583d1c06"
integrity sha512-I1wz4uxOA52zSBhKmv4KQWLJpCyvfpnDg+eQR6mjpRgV+Ldi14HLPpSUpJklZRldz0fFmGCC/kVmuc/3cPFqCg==
"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.0.tgz#78ed05eb9b750e8e3671a61a30c19198e4038f80"
integrity sha512-blrtlLKvtVyjTJ3gUHWNSHOU6tD8be9mRafqtnO7GVMcB+5z4RjNcO0DpMGmccK6N8yur1vVVYnS0gPdQ/WgEQ==
"@manypkg/find-root@^1.1.0":
version "1.1.0"
@@ -1402,11 +1393,6 @@
"@types/node" "*"
playwright-core "1.25.0"
"@popperjs/core@^2.5.4":
version "2.11.6"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
"@rollup/plugin-babel@^5.2.2":
version "5.3.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -5148,21 +5134,21 @@ lit-html@^1.1.1:
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0"
integrity sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==
lit-html@^2.0.0, lit-html@^2.1.0, lit-html@^2.2.0:
version "2.2.7"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.7.tgz#390a45589f55b95106da1f860b6aa2894ab34373"
integrity sha512-JhqiAwO1l03kRe68uBZ0i2x4ef2S5szY9vvP411nlrFZIpKK4/hwnhA/15bqbvxe1lV3ipBdhaOzHmyOk7QIRg==
lit-html@^2.0.0, lit-html@^2.2.0, lit-html@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.3.0.tgz#6896685744f0b1ddef0d39aa2092fcd06dfd169d"
integrity sha512-bnJneRqizoeSTxUeyDJLBDr+DI+7bn6P3WWqsj/4AwPWJjYgjSO5W64BVl1CrEo/8DtgU6DAYADX6yeI5/eDsg==
dependencies:
"@types/trusted-types" "^2.0.2"
lit@^2.0.0, lit@^2.0.2, lit@^2.1.0, lit@^2.2.5:
version "2.2.8"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.8.tgz#26bdf560042aa3ec9b788f5d48119f7138b2dcc1"
integrity sha512-QjeNbi/H9LVIHR+u0OqsL+hs62a16m02JlJHYN48HcBuXyiPYR8JvzsTp5dYYS81l+b9Emp3UaGo82EheV0pog==
lit@^2.0.0, lit@^2.0.2, lit@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/lit/-/lit-2.3.0.tgz#611e122cbf9f34f1af0c1f3f791f886453bdcbde"
integrity sha512-ynSGsUYKSGN2weFQ1F3SZq0Ihlj+vr/3KAET//Yf8Tz86L7lZizlw9Px+ab5iN8Si4RkVoLqd9YtKQmjdyKHNg==
dependencies:
"@lit/reactive-element" "^1.3.0"
"@lit/reactive-element" "^1.4.0"
lit-element "^3.2.0"
lit-html "^2.2.0"
lit-html "^2.3.0"
load-json-file@^4.0.0:
version "4.0.0"
@@ -7394,11 +7380,6 @@ signal-exit@^3.0.2:
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
singleton-manager@^1.4.3:
version "1.5.0"
resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.5.0.tgz#725827e3c516cd28c1d1a8533fac04a3f2a75e2b"
integrity sha512-38sWGgQlhX4TM9xLHNTdp/qVmD3kGKty8j/d4/xZUL2FLycyCPhYjctWK1gO4FZQa4mc2orPxLmzS5I1QwFMhw==
sinon@^9.2.3:
version "9.2.4"
resolved "https://registry.yarnpkg.com/sinon/-/sinon-9.2.4.tgz#e55af4d3b174a4443a8762fa8421c2976683752b"