Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 27fd2efb51 | |||
| f57e24bb27 | |||
| 65fcc8b8bf | |||
| 74f494131f | |||
| 51fe0fe5d2 | |||
| 4e89196712 | |||
| 96bffbabcf | |||
| d5ac212adb | |||
| 36988b6fc6 | |||
| 866cb79aa7 | |||
| 5a59abd1df | |||
| b0c6fb662d | |||
| 2a8c0dec5f | |||
| bb5f70a28e | |||
| e87833c59f |
66
.gitea/workflows/default_nottags.yaml
Normal file
66
.gitea/workflows/default_nottags.yaml
Normal file
@ -0,0 +1,66 @@
|
||||
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
|
||||
124
.gitea/workflows/default_tags.yaml
Normal file
124
.gitea/workflows/default_tags.yaml
Normal file
@ -0,0 +1,124 @@
|
||||
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
|
||||
137
.gitlab-ci.yml
137
.gitlab-ci.yml
@ -1,137 +0,0 @@
|
||||
# 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
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --production --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high --only=prod --production
|
||||
tags:
|
||||
- docker
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high --only=dev
|
||||
tags:
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# 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:
|
||||
- docker
|
||||
|
||||
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:
|
||||
- docker
|
||||
|
||||
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
|
||||
only:
|
||||
- tags
|
||||
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,28 +2,10 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"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"
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
58
changelog.md
Normal file
58
changelog.md
Normal file
@ -0,0 +1,58 @@
|
||||
# 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 Lossless GmbH (hello@lossless.com)
|
||||
Copyright (c) 2020 Task Venture Capital 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,17 +2,29 @@
|
||||
"gitzone": {
|
||||
"projectType": "npm",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "pushrocks",
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "push.rocks",
|
||||
"gitrepo": "smartssr",
|
||||
"shortDescription": "a smart server side renderer supporting shadow dom",
|
||||
"npmPackagename": "@pushrocks/smartssr",
|
||||
"description": "A smart server-side renderer that supports shadow DOM.",
|
||||
"npmPackagename": "@push.rocks/smartssr",
|
||||
"license": "MIT",
|
||||
"projectDomain": "push.rocks"
|
||||
"projectDomain": "push.rocks",
|
||||
"keywords": [
|
||||
"server-side rendering",
|
||||
"shadow DOM",
|
||||
"TypeScript",
|
||||
"puppeteer",
|
||||
"serialization",
|
||||
"web development",
|
||||
"node.js"
|
||||
]
|
||||
}
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
26499
package-lock.json
generated
26499
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
53
package.json
53
package.json
@ -1,32 +1,32 @@
|
||||
{
|
||||
"name": "@pushrocks/smartssr",
|
||||
"version": "1.0.35",
|
||||
"name": "@push.rocks/smartssr",
|
||||
"version": "1.0.40",
|
||||
"private": false,
|
||||
"description": "a smart server side renderer supporting shadow dom",
|
||||
"description": "A smart server-side renderer that supports shadow DOM.",
|
||||
"main": "dist_ts/index.js",
|
||||
"typings": "dist_ts/index.d.ts",
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "(tstest test/ --web)",
|
||||
"build": "(tsbuild --web)",
|
||||
"serve": "tsrun scripts/serve.ts"
|
||||
"test": "(npm run build &&tstest test/ --web)",
|
||||
"build": "(tsbuild --web --allowimplicitany)",
|
||||
"serve": "tsrun scripts/serve.ts",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.26",
|
||||
"@gitzone/tstest": "^1.0.54",
|
||||
"@pushrocks/smartserve": "^1.1.41",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"@types/node": "^16.6.1",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.15.0"
|
||||
"@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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pushrocks/smartdelay": "^2.0.13",
|
||||
"@pushrocks/smartfile": "^8.0.10",
|
||||
"@pushrocks/smartpromise": "^3.1.6",
|
||||
"@pushrocks/smartpuppeteer": "^1.0.27",
|
||||
"@pushrocks/smarttime": "^3.0.38"
|
||||
"@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"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
@ -42,5 +42,20 @@
|
||||
],
|
||||
"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
Normal file
9694
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
readme.hints.md
Normal file
1
readme.hints.md
Normal file
@ -0,0 +1 @@
|
||||
|
||||
132
readme.md
132
readme.md
@ -1,39 +1,117 @@
|
||||
# @pushrocks/smartssr
|
||||
# @push.rocks/smartssr
|
||||
a smart server side renderer supporting shadow dom
|
||||
|
||||
## 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/)
|
||||
## Install
|
||||
To install `@push.rocks/smartssr`, use the following command with npm:
|
||||
|
||||
## Status for master
|
||||
```bash
|
||||
npm install @push.rocks/smartssr --save
|
||||
```
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
Use TypeScript for best in class intellisense
|
||||
### Getting Started
|
||||
Before you can use `@push.rocks/smartssr`, ensure you have a TypeScript environment set up and configured to support ECMAScript modules (ESM).
|
||||
|
||||
## Contribution
|
||||
#### Setting Up Your Project
|
||||
1. Initialize your project (if you haven't already):
|
||||
|
||||
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). :)
|
||||
```bash
|
||||
npm init
|
||||
```
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
2. Add TypeScript to your project:
|
||||
|
||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
```bash
|
||||
npm install typescript --save-dev
|
||||
```
|
||||
|
||||
[](https://maintainedby.lossless.com)
|
||||
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.
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { expect, tap } from '@pushrocks/tapbundle';
|
||||
import * as smartssr from '../ts/index';
|
||||
import { expect, tap } from '@push.rocks/tapbundle';
|
||||
import * as smartssr from '../dist_ts/index.js';
|
||||
|
||||
let testSSRInstance: smartssr.SmartSSR;
|
||||
|
||||
@ -10,7 +10,8 @@ tap.test('should create a valid smartssr instance', async () => {
|
||||
});
|
||||
|
||||
tap.test('should render central.eu', async (tools) => {
|
||||
await testSSRInstance.renderPage('https://lossless.com');
|
||||
const renderedPage = await testSSRInstance.renderPage('https://lossless.com');
|
||||
console.log(renderedPage);
|
||||
});
|
||||
|
||||
tap.test('should render lossless.com', async () => {
|
||||
|
||||
8
ts/00_commitinfo_data.ts
Normal file
8
ts/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* 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';
|
||||
export * from './smartssr.classes.smartssr.js';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as plugins from './smartssr.plugins';
|
||||
import * as paths from './smartssr.paths';
|
||||
import * as plugins from './smartssr.plugins.js';
|
||||
import * as paths from './smartssr.paths.js';
|
||||
|
||||
import { serializeFunction } from './smartssr.function.serialize';
|
||||
import { serializeFunction } from './smartssr.function.serialize.js';
|
||||
|
||||
export interface ISmartSSROptions {
|
||||
debug: boolean;
|
||||
@ -53,9 +53,9 @@ export class SmartSSR {
|
||||
});
|
||||
|
||||
if (this.options.debug) {
|
||||
screenshotBuffer = await page.screenshot({
|
||||
screenshotBuffer = (await page.screenshot({
|
||||
encoding: 'binary',
|
||||
}) as Buffer;
|
||||
})) as Buffer;
|
||||
}
|
||||
|
||||
await page.$eval('body', serializeFunction);
|
||||
|
||||
@ -1,103 +1,151 @@
|
||||
/**
|
||||
* 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;
|
||||
export function serializeFunction(rootNode: Node) {
|
||||
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);
|
||||
});
|
||||
|
||||
/**
|
||||
* 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}`;
|
||||
};
|
||||
|
||||
const prependCss = (uuidID: string, styleTemplate: string) => {
|
||||
/**
|
||||
* 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
|
||||
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, `]`);
|
||||
styleTemplate = styleTemplate.replace(/:host/g, `.${uuidID}`);
|
||||
|
||||
// Replace :host with .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;
|
||||
};
|
||||
const loopProtection: any[] = [];
|
||||
|
||||
function serializeNode(nodeArg: HTMLElement | any, logThis = false) {
|
||||
if (loopProtection.includes(nodeArg)) {
|
||||
// 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)) {
|
||||
return;
|
||||
}
|
||||
loopProtection.push(nodeArg);
|
||||
// console.log(nodeArg.nodeName);
|
||||
if (nodeArg.shadowRoot) {
|
||||
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');
|
||||
|
||||
// lets handle the current node
|
||||
const nodeUUID = uuidv4();
|
||||
// Generate a stable ID for CSS scoping
|
||||
const nodeId = generateStableId();
|
||||
nodeArg.classList.add(nodeId);
|
||||
|
||||
nodeArg.classList.add(nodeUUID);
|
||||
|
||||
// find all slots
|
||||
// Move slotted nodes from <slot> to the light DOM
|
||||
const slots = nodeArg.shadowRoot.querySelectorAll('slot');
|
||||
|
||||
// handle slot element
|
||||
const slotsForMove: HTMLSlotElement[] = [];
|
||||
slots.forEach((slot: any) => {
|
||||
slotsForMove.push(slot);
|
||||
});
|
||||
|
||||
const slotsForMove: HTMLSlotElement[] = Array.from(slots);
|
||||
for (const slot of slotsForMove) {
|
||||
const slottedLightNodesForMove: any[] = [];
|
||||
slot.assignedNodes().forEach((lightNode) => slottedLightNodesForMove.push(lightNode));
|
||||
slottedLightNodesForMove.forEach((lightNode) =>
|
||||
slot.parentNode.insertBefore(lightNode, slot)
|
||||
);
|
||||
const slottedLightNodesForMove = slot.assignedNodes();
|
||||
slottedLightNodesForMove.forEach((lightNode) => {
|
||||
if (slot.parentNode) {
|
||||
slot.parentNode.insertBefore(lightNode, slot);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// lets modify the css
|
||||
const childNodes = nodeArg.shadowRoot.childNodes;
|
||||
// tslint:disable-next-line: prefer-for-of
|
||||
const noteForAppending: HTMLElement[] = [];
|
||||
// Prepare nodes to append after transformations
|
||||
const nodesToAppend: Node[] = [];
|
||||
|
||||
// lets care about static css first
|
||||
if (
|
||||
(nodeArg.constructor as any).styles &&
|
||||
(nodeArg.constructor as any).styles instanceof Array
|
||||
) {
|
||||
for (const objectArg of (nodeArg.constructor as any).styles) {
|
||||
// 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(nodeUUID, objectArg.cssText);
|
||||
noteForAppending.push(styleTag);
|
||||
styleTag.textContent = prependCss(nodeId, styleObj.cssText);
|
||||
nodesToAppend.push(styleTag);
|
||||
}
|
||||
}
|
||||
|
||||
childNodes.forEach((childNode: ChildNode) => {
|
||||
// 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(nodeUUID, childNode.textContent);
|
||||
childNode.textContent = prependCss(nodeId, childNode.textContent ?? '');
|
||||
} else {
|
||||
serializeNode(childNode, logThis);
|
||||
// Recursively serialize sub-elements
|
||||
serializeNode(childNode);
|
||||
}
|
||||
noteForAppending.push(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);
|
||||
}
|
||||
noteForAppending.forEach((childNode) => {
|
||||
nodeArg.append(childNode);
|
||||
});
|
||||
for (const childNode of nodesToAppend) {
|
||||
nodeArg.appendChild(childNode);
|
||||
}
|
||||
} else {
|
||||
nodeArg.childNodes.forEach((nodeArg2: any) => {
|
||||
serializeNode(nodeArg2, logThis);
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,8 @@
|
||||
import * as plugins from './smartssr.plugins';
|
||||
import * as plugins from './smartssr.plugins.js';
|
||||
|
||||
export const packageDir = plugins.path.join(__dirname, '../');
|
||||
export const packageDir = plugins.path.join(
|
||||
plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
|
||||
'../'
|
||||
);
|
||||
export const noGitDir = plugins.path.join(packageDir, './.nogit');
|
||||
plugins.smartfile.fs.ensureDirSync(noGitDir);
|
||||
|
||||
@ -4,10 +4,11 @@ import * as path from 'path';
|
||||
export { path };
|
||||
|
||||
// @pushrocks scope
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
import * as smartfile from '@pushrocks/smartfile';
|
||||
import * as smartpuppeteer from '@pushrocks/smartpuppeteer';
|
||||
import * as smartpromise from '@pushrocks/smartpromise';
|
||||
import * as smarttime from '@pushrocks/smarttime';
|
||||
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';
|
||||
|
||||
export { smartdelay, smartfile, smartpuppeteer, smartpromise, smarttime };
|
||||
export { smartdelay, smartfile, smartpath, smartpuppeteer, smartpromise, smarttime };
|
||||
|
||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
17
tslint.json
17
tslint.json
@ -1,17 +0,0 @@
|
||||
{
|
||||
"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