mirror of
https://github.com/modernweb-dev/rocket.git
synced 2026-03-21 08:51:18 +00:00
Compare commits
10 Commits
@rocket/en
...
@rocket/en
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ff8b4c5cd5 | ||
|
|
5122ea8639 | ||
|
|
3032ba9b82 | ||
|
|
93503ed309 | ||
|
|
77646abbee | ||
|
|
9ae3966fef | ||
|
|
09a47b43dc | ||
|
|
42d794bdfc | ||
|
|
b8a1b45953 | ||
|
|
379f08ff47 |
@@ -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
|
||||
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
@@ -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).
|
||||
@@ -1 +0,0 @@
|
||||
export { RocketDrawer } from './src/RocketDrawer.js';
|
||||
@@ -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"
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { RocketDrawer } from './src/RocketDrawer.js';
|
||||
|
||||
customElements.define('rocket-drawer', RocketDrawer);
|
||||
@@ -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)`;
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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
|
||||
|
||||
# <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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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(/</g, '<')
|
||||
.replace(/&/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);
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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: '<some-button>',
|
||||
headlinesWithId: [
|
||||
{
|
||||
id: 'some-button',
|
||||
level: 1,
|
||||
text: '<some-button>',
|
||||
},
|
||||
],
|
||||
level: 1,
|
||||
menuLinkText: '<some-button>',
|
||||
name: '<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: '/',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>`;
|
||||
@@ -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
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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 */
|
||||
```
|
||||
|
||||
# <some-button>
|
||||
@@ -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
|
||||
@@ -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": "<some-button>",
|
||||
"headlinesWithId": [
|
||||
{
|
||||
"text": "<some-button>",
|
||||
"id": "some-button",
|
||||
"level": 1
|
||||
}
|
||||
],
|
||||
"name": "<some-button>",
|
||||
"menuLinkText": "<some-button>",
|
||||
"url": "/component/",
|
||||
"outputRelativeFilePath": "component/index.html",
|
||||
"sourceRelativeFilePath": "component.rocket.md",
|
||||
"level": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -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
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -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
|
||||
}
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "@test/components",
|
||||
"type": "module",
|
||||
"imports": {
|
||||
"#c/*": "./components/*"
|
||||
}
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
"src"
|
||||
],
|
||||
"dependencies": {
|
||||
"lit": "^2.2.5"
|
||||
"lit": "^2.3.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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.
|
||||
|
||||
61
yarn.lock
61
yarn.lock
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user