mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
chore: create workspace in packages
This commit is contained in:
Liam DeBeasi
176
packages/core/scripts/testing/prerender.js
Normal file
176
packages/core/scripts/testing/prerender.js
Normal file
@ -0,0 +1,176 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const hydrate = require('../../hydrate');
|
||||
const domino = require('domino');
|
||||
|
||||
let prerenderCount = 0;
|
||||
|
||||
async function prerenderPage(srcIndexFilePath) {
|
||||
const start = Date.now();
|
||||
|
||||
try {
|
||||
await prerenderStatic(srcIndexFilePath);
|
||||
await prerenderHydrated(srcIndexFilePath);
|
||||
await prerenderDomino(srcIndexFilePath);
|
||||
console.log(srcIndexFilePath, ` ${Date.now() - start}ms`);
|
||||
|
||||
} catch (e) {
|
||||
console.error(`Failed:`, srcIndexFilePath, ` ${Date.now() - start}ms`);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
async function prerenderStatic(srcIndexFilePath) {
|
||||
const dirPath = path.dirname(srcIndexFilePath);
|
||||
const srcHtml = fs.readFileSync(srcIndexFilePath, 'utf-8');
|
||||
const staticFilePath = path.join(dirPath, 'prerender-static.html');
|
||||
|
||||
const results = await hydrate.renderToString(srcHtml, {
|
||||
prettyHtml: true,
|
||||
removeScripts: true
|
||||
});
|
||||
if (results.diagnostics.some(d => d.type === 'error')) {
|
||||
throw new Error('staticResults:\n' + results.diagnostics.map(d => d.messageText).join('\n'));
|
||||
}
|
||||
fs.writeFileSync(staticFilePath, results.html);
|
||||
|
||||
const dstIndexFilePath = path.join(dirPath, 'prerender.html');
|
||||
const prerenderIndexHtml = buildPrerenderIndexHtml(results.title);
|
||||
fs.writeFileSync(dstIndexFilePath, prerenderIndexHtml);
|
||||
prerenderCount++;
|
||||
}
|
||||
|
||||
async function prerenderHydrated(srcIndexFilePath) {
|
||||
const dirPath = path.dirname(srcIndexFilePath);
|
||||
const srcHtml = fs.readFileSync(srcIndexFilePath, 'utf-8');
|
||||
const hydratedFilePath = path.join(dirPath, 'prerender-hydrated.html');
|
||||
const results = await hydrate.renderToString(srcHtml, {
|
||||
prettyHtml: true
|
||||
});
|
||||
if (results.diagnostics.some(d => d.type === 'error')) {
|
||||
throw new Error('hydrateResults:\n' + staticResults.diagnostics.map(d => d.messageText).join('\n'));
|
||||
}
|
||||
fs.writeFileSync(hydratedFilePath, results.html);
|
||||
prerenderCount++;
|
||||
}
|
||||
|
||||
async function prerenderDomino(srcIndexFilePath) {
|
||||
const dirPath = path.dirname(srcIndexFilePath);
|
||||
const srcHtml = fs.readFileSync(srcIndexFilePath, 'utf-8');
|
||||
const dominoFilePath = path.join(dirPath, 'prerender-domino.html');
|
||||
const dominoDoc = domino.createDocument(srcHtml, true);
|
||||
const results = await hydrate.hydrateDocument(dominoDoc);
|
||||
if (results.diagnostics.some(d => d.type === 'error')) {
|
||||
throw new Error('dominoResults:\n' + staticResults.diagnostics.map(d => d.messageText).join('\n'));
|
||||
}
|
||||
const dominoHtml = dominoDoc.documentElement.outerHTML;
|
||||
fs.writeFileSync(dominoFilePath, dominoHtml);
|
||||
prerenderCount++;
|
||||
}
|
||||
|
||||
function buildPrerenderIndexHtml(title) {
|
||||
return `<!doctype html>
|
||||
<html class="md plt-desktop" dir="ltr" mode="md">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>${title}</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #eee;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 10px;
|
||||
}
|
||||
iframe {
|
||||
border: 1px solid black;
|
||||
width: 300px;
|
||||
height: 92vh;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
iframe {
|
||||
display: none;
|
||||
}
|
||||
input:checked ~ iframe {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<input type="checkbox" checked> <a href="index.html" target="_blank">Client</a>
|
||||
<iframe src="index.html"></iframe>
|
||||
</section>
|
||||
<section>
|
||||
<input type="checkbox" checked> <a href="prerender-static.html" target="_blank">Static</a>
|
||||
<iframe src="prerender-static.html"></iframe>
|
||||
</section>
|
||||
<section>
|
||||
<input type="checkbox" checked> <a href="prerender-domino.html" target="_blank">Domino</a>
|
||||
<iframe src="prerender-domino.html"></iframe>
|
||||
</section>
|
||||
<section>
|
||||
<input type="checkbox" checked> <a href="prerender-hydrated.html" target="_blank">Hydrated</a>
|
||||
<iframe src="prerender-hydrated.html"></iframe>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
async function prerenderDir(dirPath) {
|
||||
const items = fs.readdirSync(dirPath);
|
||||
|
||||
for (const item of items) {
|
||||
const itemPath = path.join(dirPath, item);
|
||||
const stat = fs.statSync(itemPath);
|
||||
|
||||
if (stat.isDirectory() && item !== 'spec') {
|
||||
await prerenderDir(itemPath);
|
||||
|
||||
} else {
|
||||
if (item === 'index.html' && dirPath.includes('test')) {
|
||||
await prerenderPage(itemPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const start = Date.now();
|
||||
try {
|
||||
|
||||
let p = process.argv[2];
|
||||
if (p) {
|
||||
const s = fs.statSync(p);
|
||||
if (s.isDirectory()) {
|
||||
await prerenderDir(p)
|
||||
} else {
|
||||
await prerenderPage(p);
|
||||
}
|
||||
|
||||
} else {
|
||||
p = path.join(__dirname, '..', '..', 'src', 'components');
|
||||
await prerenderDir(p);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
const duration = Date.now() - start;
|
||||
console.log(`time: ${duration}ms`);
|
||||
if (prerenderCount > 1) {
|
||||
console.log(`prerendered: ${prerenderCount}`);
|
||||
console.log(`average: ${Math.round(duration / prerenderCount)}ms`);
|
||||
}
|
||||
}
|
||||
|
||||
run();
|
||||
23
packages/core/scripts/testing/scripts.js
Normal file
23
packages/core/scripts/testing/scripts.js
Normal file
@ -0,0 +1,23 @@
|
||||
|
||||
(function() {
|
||||
|
||||
if (window.location.search.indexOf('rtl=true') > -1) {
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
}
|
||||
|
||||
if (window.location.search.indexOf('ionic:_testing=true') > -1) {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
* {
|
||||
caret-color: transparent !important;
|
||||
}`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
window.Ionic = window.Ionic || {};
|
||||
window.Ionic.config = window.Ionic.config || {};
|
||||
|
||||
window.addEventListener('appload', () => {
|
||||
window.testAppLoaded = true;
|
||||
})
|
||||
})();
|
||||
50
packages/core/scripts/testing/styles.css
Normal file
50
packages/core/scripts/testing/styles.css
Normal file
File diff suppressed because one or more lines are too long
151
packages/core/scripts/testing/themes/dark.css
Normal file
151
packages/core/scripts/testing/themes/dark.css
Normal file
@ -0,0 +1,151 @@
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-toolbar-background: #0d0d0d;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
Reference in New Issue
Block a user