Compare commits
No commits in common. "master" and "v1.0.3" have entirely different histories.
@ -1,66 +0,0 @@
|
||||
name: Default (not tags)
|
||||
|
||||
on:
|
||||
push:
|
||||
tags-ignore:
|
||||
- '**'
|
||||
|
||||
env:
|
||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||
|
||||
jobs:
|
||||
security:
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Install pnpm and npmci
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
|
||||
- name: Run npm prepare
|
||||
run: npmci npm prepare
|
||||
|
||||
- name: Audit production dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --prod
|
||||
continue-on-error: true
|
||||
|
||||
- name: Audit development dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --dev
|
||||
continue-on-error: true
|
||||
|
||||
test:
|
||||
if: ${{ always() }}
|
||||
needs: security
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Test stable
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm test
|
||||
|
||||
- name: Test build
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm build
|
||||
@ -1,124 +0,0 @@
|
||||
name: Default (tags)
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- '*'
|
||||
|
||||
env:
|
||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||
|
||||
jobs:
|
||||
security:
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Audit production dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --prod
|
||||
continue-on-error: true
|
||||
|
||||
- name: Audit development dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --dev
|
||||
continue-on-error: true
|
||||
|
||||
test:
|
||||
if: ${{ always() }}
|
||||
needs: security
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Test stable
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm test
|
||||
|
||||
- name: Test build
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm build
|
||||
|
||||
release:
|
||||
needs: test
|
||||
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Release
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm publish
|
||||
|
||||
metadata:
|
||||
needs: test
|
||||
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
continue-on-error: true
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Code quality
|
||||
run: |
|
||||
npmci command npm install -g typescript
|
||||
npmci npm install
|
||||
|
||||
- name: Trigger
|
||||
run: npmci trigger
|
||||
|
||||
- name: Build docs and upload artifacts
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
pnpm install -g @git.zone/tsdoc
|
||||
npmci command tsdoc
|
||||
continue-on-error: true
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -15,6 +15,8 @@ node_modules/
|
||||
|
||||
# builds
|
||||
dist/
|
||||
dist_*/
|
||||
dist_web/
|
||||
dist_serve/
|
||||
dist_ts_web/
|
||||
|
||||
# custom
|
||||
126
.gitlab-ci.yml
Normal file
126
.gitlab-ci.yml
Normal file
@ -0,0 +1,126 @@
|
||||
# gitzone ci_default
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
|
||||
cache:
|
||||
paths:
|
||||
- .npmci_cache/
|
||||
key: '$CI_BUILD_STAGE'
|
||||
|
||||
stages:
|
||||
- security
|
||||
- test
|
||||
- release
|
||||
- metadata
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
mirror:
|
||||
stage: security
|
||||
script:
|
||||
- npmci git mirror
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
snyk:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:snyk
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --ignore-scripts
|
||||
- npmci command snyk test
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
# ====================
|
||||
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
release:
|
||||
stage: release
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm publish
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
# ====================
|
||||
# metadata stage
|
||||
# ====================
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
trigger:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci trigger
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install lts
|
||||
- npmci command npm install -g @gitzone/tsdoc
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command tsdoc
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
only:
|
||||
- tags
|
||||
artifacts:
|
||||
expire_in: 1 week
|
||||
paths:
|
||||
- public
|
||||
allow_failure: true
|
||||
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,10 +2,28 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
"args": [
|
||||
"${relativeFile}"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
},
|
||||
{
|
||||
"name": "test.ts",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"test/test.ts"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
||||
"properties": {
|
||||
"projectType": {
|
||||
"type": "string",
|
||||
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||
"enum": ["website", "element", "service", "npm"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
58
changelog.md
58
changelog.md
@ -1,58 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-01 - 1.0.40 - fix(test)
|
||||
Fix test configuration and import path in test suite
|
||||
|
||||
- Changed the test command in package.json to include the build step.
|
||||
- Fixed the import path for smartssr in the test suite to point to the correct distribution directory.
|
||||
- Added console log to display rendered HTML content during test execution.
|
||||
|
||||
## 2025-01-01 - 1.0.39 - fix(core)
|
||||
Fixed package and file path typos and removed GitLab CI configuration.
|
||||
|
||||
- Corrected the package scope typos from '@gitzone' to '@git.zone'.
|
||||
- Removed unused GitLab CI YAML configuration file.
|
||||
- Normalized CSS scoping for shadow DOM serialization with incremental ID generation.
|
||||
- Updated smartfile dependency version in package.json.
|
||||
|
||||
## 2024-05-29 - 1.0.38 - Configuration Updates
|
||||
Minor updates to project configuration files.
|
||||
|
||||
- Updated description
|
||||
- Revised tsconfig
|
||||
- Updated npmextra.json: githost
|
||||
|
||||
## 2023-07-27 - 1.0.35 to 1.0.37 - Core Fixes
|
||||
Maintenance releases focusing on core updates.
|
||||
|
||||
- Multiple fixes to the core module
|
||||
|
||||
## 2021-08-16 - 1.0.27 to 1.0.34 - Core Enhancements
|
||||
Several updates targeting enhancements in the core functionality.
|
||||
|
||||
- Series of core module updates
|
||||
|
||||
## 2021-05-19 - 1.0.23 to 1.0.26 - Core Updates
|
||||
Focused update cycle on improving core stability.
|
||||
|
||||
- Addressed core update issues
|
||||
|
||||
## 2021-01-15 - 1.0.19 to 1.0.22 - Core Fix Cycle
|
||||
Incremental core updates for better performance.
|
||||
|
||||
- Applied multiple core updates
|
||||
|
||||
## 2020-08-06 - 1.0.10 to 1.0.18 - Core Adjustments
|
||||
Consistent improvements and fixes in the core module.
|
||||
|
||||
- Ongoing core updates
|
||||
|
||||
## 2020-03-01 - 1.0.6 to 1.0.9 - Iterative Core Fixes
|
||||
Maintaining core functionality with multiple updates.
|
||||
|
||||
- Continued core updates
|
||||
|
||||
## 2020-02-12 - 1.0.1 to 1.0.5 - Initial Core Fixes
|
||||
Initial round of updates on core functionality.
|
||||
|
||||
- Initial set of core fixes
|
||||
2
license
2
license
@ -1,4 +1,4 @@
|
||||
Copyright (c) 2020 Task Venture Capital GmbH (hello@lossless.com)
|
||||
Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -2,29 +2,17 @@
|
||||
"gitzone": {
|
||||
"projectType": "npm",
|
||||
"module": {
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "push.rocks",
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "pushrocks",
|
||||
"gitrepo": "smartssr",
|
||||
"description": "A smart server-side renderer that supports shadow DOM.",
|
||||
"npmPackagename": "@push.rocks/smartssr",
|
||||
"shortDescription": "a smart server side renderer supporting shadow dom",
|
||||
"npmPackagename": "@pushrocks/smartssr",
|
||||
"license": "MIT",
|
||||
"projectDomain": "push.rocks",
|
||||
"keywords": [
|
||||
"server-side rendering",
|
||||
"shadow DOM",
|
||||
"TypeScript",
|
||||
"puppeteer",
|
||||
"serialization",
|
||||
"web development",
|
||||
"node.js"
|
||||
]
|
||||
"projectDomain": "push.rocks"
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
"npmGlobalTools": [],
|
||||
"npmAccessLevel": "public"
|
||||
},
|
||||
"tsdoc": {
|
||||
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
||||
}
|
||||
}
|
||||
1841
package-lock.json
generated
Normal file
1841
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
61
package.json
61
package.json
@ -1,61 +1,40 @@
|
||||
{
|
||||
"name": "@push.rocks/smartssr",
|
||||
"version": "1.0.40",
|
||||
"name": "@pushrocks/smartssr",
|
||||
"version": "1.0.3",
|
||||
"private": false,
|
||||
"description": "A smart server-side renderer that supports shadow DOM.",
|
||||
"main": "dist_ts/index.js",
|
||||
"typings": "dist_ts/index.d.ts",
|
||||
"description": "a smart server side renderer supporting shadow dom",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/index.d.ts",
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "(npm run build &&tstest test/ --web)",
|
||||
"build": "(tsbuild --web --allowimplicitany)",
|
||||
"serve": "tsrun scripts/serve.ts",
|
||||
"buildDocs": "tsdoc"
|
||||
"test": "(tstest test/ --web)",
|
||||
"build": "(tsbuild --web)",
|
||||
"format": "(gitzone format)"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.66",
|
||||
"@git.zone/tsrun": "^1.2.44",
|
||||
"@git.zone/tstest": "^1.0.77",
|
||||
"@push.rocks/tapbundle": "^5.0.8",
|
||||
"@types/node": "^22.10.3"
|
||||
"@gitzone/tsbuild": "^2.0.22",
|
||||
"@gitzone/tstest": "^1.0.15",
|
||||
"@pushrocks/tapbundle": "^3.0.7",
|
||||
"@types/node": "^10.11.7",
|
||||
"tslint": "^5.11.0",
|
||||
"tslint-config-prettier": "^1.15.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@push.rocks/smartdelay": "^3.0.1",
|
||||
"@push.rocks/smartfile": "^11.0.23",
|
||||
"@push.rocks/smartpath": "^5.0.5",
|
||||
"@push.rocks/smartpromise": "^4.0.2",
|
||||
"@push.rocks/smartpuppeteer": "^2.0.2",
|
||||
"@push.rocks/smarttime": "^4.0.1"
|
||||
"@pushrocks/smartdelay": "^2.0.6",
|
||||
"@pushrocks/smartfile": "^7.0.8",
|
||||
"@pushrocks/smartpromise": "^3.0.6",
|
||||
"@pushrocks/smartpuppeteer": "^1.0.14"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
"ts_web/**/*",
|
||||
"dist/**/*",
|
||||
"dist_*/**/*",
|
||||
"dist_ts/**/*",
|
||||
"dist_web/**/*",
|
||||
"dist_ts_web/**/*",
|
||||
"assets/**/*",
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
],
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
"server-side rendering",
|
||||
"shadow DOM",
|
||||
"TypeScript",
|
||||
"puppeteer",
|
||||
"serialization",
|
||||
"web development",
|
||||
"node.js"
|
||||
],
|
||||
"homepage": "https://code.foss.global/push.rocks/smartssr",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://code.foss.global/push.rocks/smartssr.git"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
9694
pnpm-lock.yaml
generated
9694
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
||||
|
||||
127
readme.md
127
readme.md
@ -1,117 +1,32 @@
|
||||
# @push.rocks/smartssr
|
||||
# @pushrocks/smartssr
|
||||
a smart server side renderer supporting shadow dom
|
||||
|
||||
## Install
|
||||
To install `@push.rocks/smartssr`, use the following command with npm:
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@pushrocks/smartssr)
|
||||
* [gitlab.com (source)](https://gitlab.com/pushrocks/smartssr)
|
||||
* [github.com (source mirror)](https://github.com/pushrocks/smartssr)
|
||||
* [docs (typedoc)](https://pushrocks.gitlab.io/smartssr/)
|
||||
|
||||
```bash
|
||||
npm install @push.rocks/smartssr --save
|
||||
```
|
||||
|
||||
Or with yarn:
|
||||
|
||||
```bash
|
||||
yarn add @push.rocks/smartssr
|
||||
```
|
||||
|
||||
This will add `@push.rocks/smartssr` to your project's dependencies and make it available for import in your TypeScript files.
|
||||
## Status for master
|
||||
[](https://gitlab.com/pushrocks/smartssr/commits/master)
|
||||
[](https://gitlab.com/pushrocks/smartssr/commits/master)
|
||||
[](https://www.npmjs.com/package/@pushrocks/smartssr)
|
||||
[](https://snyk.io/test/npm/@pushrocks/smartssr)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://prettier.io/)
|
||||
|
||||
## Usage
|
||||
### Introduction
|
||||
`@push.rocks/smartssr` is a powerful package designed to facilitate server-side rendering with support for shadow DOM, making it an ideal choice for projects where SEO or initial load performance is critical while maintaining the benefits of Web Components. Below, we'll dive deep into how you can leverage `@push.rocks/smartssr` in your TypeScript projects.
|
||||
|
||||
### Getting Started
|
||||
Before you can use `@push.rocks/smartssr`, ensure you have a TypeScript environment set up and configured to support ECMAScript modules (ESM).
|
||||
Use TypeScript for best in class intellisense
|
||||
|
||||
#### Setting Up Your Project
|
||||
1. Initialize your project (if you haven't already):
|
||||
## Contribution
|
||||
|
||||
```bash
|
||||
npm init
|
||||
```
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
|
||||
2. Add TypeScript to your project:
|
||||
For further information read the linked docs at the top of this readme.
|
||||
|
||||
```bash
|
||||
npm install typescript --save-dev
|
||||
```
|
||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
|
||||
3. Initialize TypeScript in your project:
|
||||
|
||||
```bash
|
||||
npx tsc --init
|
||||
```
|
||||
|
||||
Make sure your `tsconfig.json` is configured to use ECMAScript modules by setting `"module": "ESNext"`.
|
||||
|
||||
### Basic Usage
|
||||
|
||||
First, import `SmartSSR` from the package:
|
||||
|
||||
```typescript
|
||||
import { SmartSSR } from '@push.rocks/smartssr';
|
||||
```
|
||||
|
||||
Create an instance of `SmartSSR`. You can pass options to the constructor to customize behavior, for instance, enabling debug mode:
|
||||
|
||||
```typescript
|
||||
const smartSSR = new SmartSSR({
|
||||
debug: true // Enables debug mode for additional logging
|
||||
});
|
||||
```
|
||||
|
||||
### Rendering a Web Page
|
||||
With `SmartSSR`, you can render any webpage, including those utilizing shadow DOM, and retrieve its HTML content as a string. This feature is particularly useful for SEO purposes and can be used to pre-render contents of single-page applications (SPAs) or web components.
|
||||
|
||||
The `renderPage` method accepts a URL as a parameter and returns a Promise that resolves with the rendered HTML content of the page.
|
||||
|
||||
```typescript
|
||||
(async () => {
|
||||
try {
|
||||
const renderedHTML = await smartSSR.renderPage('https://example.com');
|
||||
console.log(renderedHTML); // Outputs the rendered HTML content
|
||||
} catch (error) {
|
||||
console.error(`Error rendering page: ${error}`);
|
||||
}
|
||||
})();
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
#### Customizing Rendering Behavior
|
||||
The `SmartSSR` constructor accepts various options allowing you to customize the behavior of the rendering process. For instance, setting the `debug` option to `true` enables additional logging, which can be helpful for development and debugging purposes.
|
||||
|
||||
#### Handling Complex Scenarios
|
||||
In more complex scenarios, such as when rendering web applications that rely heavily on dynamic content or client-side scripts, you might need to customize your rendering process further. This could involve manipulating the page or waiting for specific elements or data before considering the rendering process complete.
|
||||
|
||||
`smartssr` leverages Puppeteer under the hood, which means you can use any Puppeteer functionality within your rendering logic if needed. For example, you could wait for a specific element to appear on the page before capturing the rendered content:
|
||||
|
||||
```typescript
|
||||
// Custom rendering logic
|
||||
await page.waitForSelector('#dynamic-content-loaded', { timeout: 5000 });
|
||||
const dynamicContentHTML = await smartSSR.renderPage('https://dynamic-content-example.com');
|
||||
```
|
||||
|
||||
### Conclusion
|
||||
`@push.rocks/smartssr` offers a streamlined and effective solution for server-side rendering with shadow DOM support, enabling improved SEO and performance for web applications. Whether you're rendering simple static pages or complex SPAs with dynamic content, `smartssr` provides the tools necessary to achieve your objectives efficiently.
|
||||
|
||||
For further information and advanced configurations, refer to the [official documentation](https://push.rocks.gitlab.io/smartssr/) and explore the full capabilities of `@push.rocks/smartssr`.
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository.
|
||||
|
||||
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
||||
|
||||
### Trademarks
|
||||
|
||||
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
|
||||
|
||||
### Company Information
|
||||
|
||||
Task Venture Capital GmbH
|
||||
Registered at District court Bremen HRB 35230 HB, Germany
|
||||
|
||||
For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
|
||||
|
||||
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||
[](https://maintainedby.lossless.com)
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import * as smartserve from '@pushrocks/smartserve';
|
||||
import * as path from 'path';
|
||||
|
||||
const smartserveInstance = new smartserve.SmartServe({
|
||||
injectReload: true,
|
||||
serveDir: path.join(__dirname, '../.nogit/')
|
||||
});
|
||||
|
||||
smartserveInstance.start();
|
||||
24
test/test.ts
24
test/test.ts
@ -1,17 +1,18 @@
|
||||
import { expect, tap } from '@push.rocks/tapbundle';
|
||||
import * as smartssr from '../dist_ts/index.js';
|
||||
import { expect, tap } from '@pushrocks/tapbundle';
|
||||
import * as smartssr from '../ts/index';
|
||||
|
||||
let testSSRInstance: smartssr.SmartSSR;
|
||||
|
||||
tap.test('should create a valid smartssr instance', async () => {
|
||||
testSSRInstance = new smartssr.SmartSSR({
|
||||
debug: true,
|
||||
});
|
||||
testSSRInstance = new smartssr.SmartSSR();
|
||||
});
|
||||
|
||||
tap.test('should render central.eu', async (tools) => {
|
||||
const renderedPage = await testSSRInstance.renderPage('https://lossless.com');
|
||||
console.log(renderedPage);
|
||||
tap.test('should start the smartssr instance', async () => {
|
||||
await testSSRInstance.start();
|
||||
});
|
||||
|
||||
tap.test('should render central.eu', async tools => {
|
||||
await testSSRInstance.renderPage('https://central.eu');
|
||||
});
|
||||
|
||||
tap.test('should render lossless.com', async () => {
|
||||
@ -19,8 +20,11 @@ tap.test('should render lossless.com', async () => {
|
||||
});
|
||||
|
||||
tap.test('should render https://lossless.gmbh', async () => {
|
||||
const renderedPage = await testSSRInstance.renderPage('https://lossless.gmbh');
|
||||
console.log(renderedPage);
|
||||
await testSSRInstance.renderPage('https://lossless.gmbh');
|
||||
});
|
||||
|
||||
tap.test('should stop the smartssr instacne', async () => {
|
||||
await testSSRInstance.stop();
|
||||
});
|
||||
|
||||
tap.start();
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
/**
|
||||
* autocreated commitinfo by @push.rocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@push.rocks/smartssr',
|
||||
version: '1.0.40',
|
||||
description: 'A smart server-side renderer that supports shadow DOM.'
|
||||
}
|
||||
@ -1 +1 @@
|
||||
export * from './smartssr.classes.smartssr.js';
|
||||
export * from './smartssr.classes.smartssr';
|
||||
|
||||
@ -1,97 +1,46 @@
|
||||
import * as plugins from './smartssr.plugins.js';
|
||||
import * as paths from './smartssr.paths.js';
|
||||
import * as plugins from './smartssr.plugins';
|
||||
import * as paths from './smartssr.paths';
|
||||
|
||||
import { serializeFunction } from './smartssr.function.serialize.js';
|
||||
|
||||
export interface ISmartSSROptions {
|
||||
debug: boolean;
|
||||
}
|
||||
import { serializeFunction } from './smartssr.function.serialize';
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export class SmartSSR {
|
||||
public options: ISmartSSROptions;
|
||||
|
||||
constructor(optionsArg?: ISmartSSROptions) {
|
||||
this.options = {
|
||||
...{
|
||||
debug: false,
|
||||
},
|
||||
...optionsArg,
|
||||
};
|
||||
public browser: plugins.smartpuppeteer.puppeteer.Browser;
|
||||
public async start() {
|
||||
this.browser = await plugins.smartpuppeteer.getEnvAwareBrowserInstance();
|
||||
}
|
||||
public async stop() {
|
||||
if (this.browser) {
|
||||
await plugins.smartdelay.delayFor(3000);
|
||||
await this.browser.close();
|
||||
this.browser = null;
|
||||
} else {
|
||||
console.log('browser was not in started mode');
|
||||
}
|
||||
}
|
||||
|
||||
public async renderPage(urlArg: string) {
|
||||
const overallTimeMeasurement = new plugins.smarttime.HrtMeasurement();
|
||||
overallTimeMeasurement.start();
|
||||
const resultDeferred = plugins.smartpromise.defer<string>();
|
||||
const browser = new plugins.smartpuppeteer.IncognitoBrowser();
|
||||
const renderTimeMeasurement = new plugins.smarttime.HrtMeasurement();
|
||||
let renderedPageString: string;
|
||||
let screenshotBuffer: Buffer;
|
||||
await browser.start();
|
||||
try {
|
||||
const context = await browser.getNewIncognitoContext();
|
||||
const page = await context.newPage();
|
||||
|
||||
// lets protect against left open tabs
|
||||
plugins.smartdelay.delayFor(30000).then(async () => {
|
||||
try {
|
||||
await browser.stop();
|
||||
} catch {}
|
||||
});
|
||||
|
||||
page.on('console', (msg) => {
|
||||
console.log(`${urlArg}: ${msg.text()}`);
|
||||
});
|
||||
|
||||
renderTimeMeasurement.start();
|
||||
await page.goto(urlArg, {
|
||||
waitUntil: 'networkidle2',
|
||||
timeout: 30000,
|
||||
});
|
||||
|
||||
if (this.options.debug) {
|
||||
screenshotBuffer = (await page.screenshot({
|
||||
encoding: 'binary',
|
||||
})) as Buffer;
|
||||
}
|
||||
const page = await this.browser.newPage();
|
||||
page.on('console', (event: any) => console.log(event._text));
|
||||
|
||||
page.on('load', async (...args) => {
|
||||
// await plugins.smartdelay.delayFor(2000);
|
||||
await page.$eval('body', serializeFunction);
|
||||
const pageContent = await page.content();
|
||||
renderedPageString = pageContent;
|
||||
const renderedPageString = pageContent;
|
||||
resultDeferred.resolve(renderedPageString);
|
||||
renderTimeMeasurement.stop();
|
||||
|
||||
// lets clean up async
|
||||
await page.close();
|
||||
await context.close();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
await browser.stop();
|
||||
return;
|
||||
}
|
||||
await browser.stop();
|
||||
|
||||
overallTimeMeasurement.stop();
|
||||
console.log(
|
||||
`Overall it took ${overallTimeMeasurement.milliSeconds} milliseconds to render ${urlArg}`
|
||||
);
|
||||
console.log(
|
||||
`The rendering alone took ${renderTimeMeasurement.milliSeconds} milliseconds for ${urlArg}`
|
||||
);
|
||||
|
||||
// debug
|
||||
if (this.options.debug) {
|
||||
plugins.smartfile.memory.toFsSync(
|
||||
renderedPageString,
|
||||
plugins.path.join(paths.noGitDir, 'test.html')
|
||||
);
|
||||
const fs = await import('fs');
|
||||
fs.writeFileSync(plugins.path.join(paths.noGitDir, 'test.png'), screenshotBuffer);
|
||||
}
|
||||
});
|
||||
|
||||
return resultDeferred.promise;
|
||||
await page.goto(urlArg);
|
||||
const result = await resultDeferred.promise;
|
||||
page.close();
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,151 +1,78 @@
|
||||
/**
|
||||
* Represents a style object on a custom element.
|
||||
*/
|
||||
export interface IStyleObject {
|
||||
cssText: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a constructor for a custom element that may have a static `styles` property.
|
||||
*/
|
||||
export interface ICustomElementConstructor extends Function {
|
||||
styles?: IStyleObject[];
|
||||
}
|
||||
|
||||
declare var document: Document;
|
||||
|
||||
/**
|
||||
* Serializes shadow-DOM-based elements into light DOM by:
|
||||
* 1. Moving slotted children out of their <slot> elements.
|
||||
* 2. Converting shadow-root CSS to scoping-based CSS.
|
||||
* 3. Appending styles and elements back onto the node.
|
||||
*
|
||||
* @param rootNode The root node under which all child nodes will be serialized.
|
||||
*/
|
||||
export function serializeFunction(rootNode: Node): void {
|
||||
/**
|
||||
* Instead of a UUID, we use a globally incrementing counter for stable,
|
||||
* predictable IDs across multiple serializations of the same tree.
|
||||
*/
|
||||
let globalIdCounter = 0;
|
||||
const generateStableId = (): string => {
|
||||
globalIdCounter++;
|
||||
// Feel free to adjust the prefix/suffix as you like
|
||||
return `unix-${globalIdCounter}`;
|
||||
export function serializeFunction(rootNode) {
|
||||
const uuidv4 = () => {
|
||||
return 'unixxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Prepend the generated ID class to CSS in order to emulate :host scoping.
|
||||
*/
|
||||
const prependCss = (uuidID: string, styleTemplate: string): string => {
|
||||
// Ensure there's at least one :host, so the user code typically expects scoping
|
||||
const prependCss = (uuidID: string, styleTemplate: string) => {
|
||||
if (!styleTemplate.includes(':host')) {
|
||||
styleTemplate = `:host {}\n\n${styleTemplate}`;
|
||||
}
|
||||
|
||||
// Replace patterns that should be placed under the .uuidID scope
|
||||
styleTemplate = styleTemplate.replace(/}[ \t\n]+\./g, `}\n\n.${uuidID} .`);
|
||||
styleTemplate = styleTemplate.replace(/}[ \t\n]+\*/g, `}\n\n.${uuidID} *`);
|
||||
styleTemplate = styleTemplate.replace(/\(\[/g, `[`);
|
||||
styleTemplate = styleTemplate.replace(/\]\)/g, `]`);
|
||||
|
||||
// Replace :host with .uuidID
|
||||
styleTemplate = styleTemplate.replace(/:host/g, `.${uuidID}`);
|
||||
styleTemplate = styleTemplate.replace(/:host/g, `.${uuidID}`);
|
||||
|
||||
styleTemplate = styleTemplate.replace(/{[ \t\n]+\./g, `{\n\n.${uuidID} .`);
|
||||
styleTemplate = styleTemplate.replace(/}[ \t\n]+img/g, `}\n\n.${uuidID} img`);
|
||||
styleTemplate = styleTemplate.replace(/}[ \t\n]+div/g, `}\n\n.${uuidID} div`);
|
||||
|
||||
return styleTemplate;
|
||||
};
|
||||
|
||||
// Keep track of visited nodes to avoid loops
|
||||
const visitedNodes = new WeakSet<Node>();
|
||||
|
||||
/**
|
||||
* Recursively serializes a node, moving shadow DOM content into light DOM.
|
||||
*
|
||||
* @param nodeArg The node to serialize.
|
||||
*/
|
||||
function serializeNode(nodeArg: HTMLElement | Node): void {
|
||||
// Prevent re-serializing the same node
|
||||
if (visitedNodes.has(nodeArg)) {
|
||||
function serializeNode(node: HTMLElement) {
|
||||
if (!node.tagName.includes('-')) {
|
||||
return;
|
||||
}
|
||||
visitedNodes.add(nodeArg);
|
||||
|
||||
// If the node has a shadowRoot, move everything into light DOM
|
||||
if (
|
||||
nodeArg instanceof HTMLElement &&
|
||||
nodeArg.shadowRoot &&
|
||||
nodeArg.shadowRoot instanceof ShadowRoot
|
||||
) {
|
||||
// Mark node for SSR
|
||||
nodeArg.setAttribute('smartssr', 'yes');
|
||||
|
||||
// Generate a stable ID for CSS scoping
|
||||
const nodeId = generateStableId();
|
||||
nodeArg.classList.add(nodeId);
|
||||
|
||||
// Move slotted nodes from <slot> to the light DOM
|
||||
const slots = nodeArg.shadowRoot.querySelectorAll('slot');
|
||||
const slotsForMove: HTMLSlotElement[] = Array.from(slots);
|
||||
for (const slot of slotsForMove) {
|
||||
const slottedLightNodesForMove = slot.assignedNodes();
|
||||
slottedLightNodesForMove.forEach((lightNode) => {
|
||||
if (slot.parentNode) {
|
||||
slot.parentNode.insertBefore(lightNode, slot);
|
||||
if (node.hasAttribute('smartssr')) {
|
||||
console.log(`${node.tagName} is already serialized`);
|
||||
return;
|
||||
}
|
||||
});
|
||||
node.setAttribute('smartssr', 'yes');
|
||||
// lets handle the current node
|
||||
const nodeUUID = uuidv4();
|
||||
|
||||
try {
|
||||
node.classList.add(nodeUUID);
|
||||
|
||||
// lets modify the css
|
||||
const children: HTMLElement[] = node.shadowRoot.children as any;
|
||||
for (const childElement of children) {
|
||||
if (childElement.tagName === 'STYLE') {
|
||||
childElement.textContent = prependCss(nodeUUID, childElement.textContent);
|
||||
}
|
||||
serializeFunction(childElement);
|
||||
}
|
||||
|
||||
// Prepare nodes to append after transformations
|
||||
const nodesToAppend: Node[] = [];
|
||||
const templateDom = document.createElement('template');
|
||||
templateDom.innerHTML = node.innerHTML;
|
||||
|
||||
// Some frameworks store static styles in a static `styles` property on the constructor
|
||||
const elementConstructor = nodeArg.constructor as ICustomElementConstructor;
|
||||
if (Array.isArray(elementConstructor.styles)) {
|
||||
for (const styleObj of elementConstructor.styles) {
|
||||
const styleTag = document.createElement('style');
|
||||
styleTag.textContent = prependCss(nodeId, styleObj.cssText);
|
||||
nodesToAppend.push(styleTag);
|
||||
const slot = node.shadowRoot.querySelector('slot');
|
||||
node.childNodes.forEach(lightNode => slot.parentNode.insertBefore(lightNode, slot));
|
||||
// remove slot element
|
||||
if (slot) {
|
||||
slot.parentNode.removeChild(slot);
|
||||
}
|
||||
|
||||
// move shadowDom into root node
|
||||
node.shadowRoot.childNodes.forEach(shadowNode => node.appendChild(shadowNode));
|
||||
|
||||
// add original lightDom as template
|
||||
if (templateDom.innerHTML !== '') {
|
||||
node.appendChild(templateDom);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error:', err);
|
||||
console.log(node.tagName);
|
||||
}
|
||||
}
|
||||
|
||||
// Convert existing shadow DOM childNodes
|
||||
nodeArg.shadowRoot.childNodes.forEach((childNode: ChildNode) => {
|
||||
if (childNode instanceof HTMLElement) {
|
||||
// If it's a <style>, prepend the scoping class
|
||||
if (childNode.tagName === 'STYLE') {
|
||||
childNode.textContent = prependCss(nodeId, childNode.textContent ?? '');
|
||||
} else {
|
||||
// Recursively serialize sub-elements
|
||||
serializeNode(childNode);
|
||||
}
|
||||
nodesToAppend.push(childNode);
|
||||
} else {
|
||||
// For non-HTMLElement child nodes, just append
|
||||
nodesToAppend.push(childNode);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear the element and re-append the now converted nodes
|
||||
while (nodeArg.firstChild) {
|
||||
nodeArg.removeChild(nodeArg.firstChild);
|
||||
}
|
||||
for (const childNode of nodesToAppend) {
|
||||
nodeArg.appendChild(childNode);
|
||||
}
|
||||
} else {
|
||||
// If it's a normal (light DOM) node, just recurse into its childNodes
|
||||
nodeArg.childNodes.forEach((child) => {
|
||||
serializeNode(child);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Start serialization from the children of the provided root
|
||||
rootNode.childNodes.forEach((nodeArg) => {
|
||||
serializeNode(nodeArg);
|
||||
});
|
||||
[...rootNode.querySelectorAll('*')]
|
||||
.filter(element => /-/.test(element.nodeName))
|
||||
.forEach(serializeNode);
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
import * as plugins from './smartssr.plugins.js';
|
||||
import * as plugins from './smartssr.plugins';
|
||||
|
||||
export const packageDir = plugins.path.join(
|
||||
plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
|
||||
'../'
|
||||
);
|
||||
export const packageDir = plugins.path.join(__dirname, '../');
|
||||
export const noGitDir = plugins.path.join(packageDir, './.nogit');
|
||||
plugins.smartfile.fs.ensureDirSync(noGitDir);
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
// node native
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
|
||||
export { path };
|
||||
export { path, fs };
|
||||
|
||||
// @pushrocks scope
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
import * as smartfile from '@push.rocks/smartfile';
|
||||
import * as smartpuppeteer from '@push.rocks/smartpuppeteer';
|
||||
import * as smartpath from '@push.rocks/smartpath';
|
||||
import * as smartpromise from '@push.rocks/smartpromise';
|
||||
import * as smarttime from '@push.rocks/smarttime';
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
import * as smartfile from '@pushrocks/smartfile';
|
||||
import * as smartpuppeteer from '@pushrocks/smartpuppeteer';
|
||||
import * as smartpromise from '@pushrocks/smartpromise';
|
||||
|
||||
export { smartdelay, smartfile, smartpath, smartpuppeteer, smartpromise, smarttime };
|
||||
export { smartdelay, smartfile, smartpuppeteer, smartpromise };
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
17
tslint.json
Normal file
17
tslint.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": ["tslint:latest", "tslint-config-prettier"],
|
||||
"rules": {
|
||||
"semicolon": [true, "always"],
|
||||
"no-console": false,
|
||||
"ordered-imports": false,
|
||||
"object-literal-sort-keys": false,
|
||||
"member-ordering": {
|
||||
"options":{
|
||||
"order": [
|
||||
"static-method"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultSeverity": "warning"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user