Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples Overhaul #6060

Merged
merged 143 commits into from
Feb 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
143 commits
Select commit Hold shift + click to select a range
b5fcfe2
separated out template example html to file
kpal81xd Feb 2, 2024
f4aa9f9
Merge branch 'main' into examples-rework
kpal81xd Feb 2, 2024
af96dab
removed temporary comment
kpal81xd Feb 2, 2024
068886c
Added comment to explain template replacements
kpal81xd Feb 2, 2024
5d82265
setup barebones examples module
kpal81xd Feb 2, 2024
340aee5
removed examples-new testing; app.html (unused)
kpal81xd Feb 4, 2024
fa1855a
moved files around for better organization
kpal81xd Feb 4, 2024
5eab45b
Merge branch 'main' into examples-rework
kpal81xd Feb 5, 2024
c19953f
checked in thumbnails to have defaults
kpal81xd Feb 5, 2024
04582b5
removed unused enableHotReload file
kpal81xd Feb 5, 2024
2aaf57b
Removed unused importmap file
kpal81xd Feb 5, 2024
9bd9bc9
renamed directory and generate standalone files to more descriptive n…
kpal81xd Feb 5, 2024
5ff03b5
fixed watching standalone files
kpal81xd Feb 5, 2024
4a1efb2
removed example data generation and embedded into helper
kpal81xd Feb 5, 2024
b24168e
Merge branch 'main' into examples-rework
kpal81xd Feb 5, 2024
8aa0d7f
removed log in example-data helper
kpal81xd Feb 5, 2024
0577710
object cleanup in example data
kpal81xd Feb 5, 2024
49d7051
removed options.js; moved assetPath inside app folder
kpal81xd Feb 5, 2024
368a738
replaced all thumbnails from png to webp
kpal81xd Feb 5, 2024
f8e19bc
Merge branch 'main' into examples-rework
kpal81xd Feb 5, 2024
2ed6dac
fixed monaco dark issue
kpal81xd Feb 5, 2024
03c6f69
change github link to use main branch
kpal81xd Feb 5, 2024
ed1faf5
Merge branch 'main' into examples-rework
kpal81xd Feb 6, 2024
7ec2d00
renamed pathes to paths
kpal81xd Feb 6, 2024
e529b66
fixed path rename in example template
kpal81xd Feb 6, 2024
7604152
removed unused example data object
kpal81xd Feb 6, 2024
cdb4fd7
removed unused import in standalone generation
kpal81xd Feb 6, 2024
3329766
put sharing html files into single subfolder instead of combining fol…
kpal81xd Feb 6, 2024
3bd1991
removed unused polyfill functions
kpal81xd Feb 6, 2024
375f574
fixed getDeviceType
kpal81xd Feb 7, 2024
ada814a
split up floating functions into utils, extracted polyfill function, …
kpal81xd Feb 7, 2024
2c86019
removed unused polyfill files
kpal81xd Feb 7, 2024
2ab07f6
updated event types to use CustomEvent
kpal81xd Feb 7, 2024
e5955ea
Merge branch 'main' into examples-rework
kpal81xd Feb 7, 2024
9d1643b
Merge branch 'main' into examples-rework
kpal81xd Feb 7, 2024
427d2e5
made events consistent and made handlers private methods
kpal81xd Feb 7, 2024
a091261
moved components into subfolder
kpal81xd Feb 7, 2024
0c0ad3a
renamed components to use uppercase (convention)
kpal81xd Feb 7, 2024
5d948e3
minor refactor for object
kpal81xd Feb 7, 2024
02d16a2
fixed ready scope issue
kpal81xd Feb 7, 2024
94fdcb0
changed separate methods for events into fire method handler
kpal81xd Feb 7, 2024
c12321f
updated stats to use single event for setting state; added back delay…
kpal81xd Feb 7, 2024
8193343
cleaned up iframe code
kpal81xd Feb 7, 2024
719dff0
moved example and controls to body of html (prep for module import); …
kpal81xd Feb 7, 2024
021ec9e
fixed issue with controls showing up with no content
kpal81xd Feb 8, 2024
9f0d731
cleaned up case conversion
kpal81xd Feb 8, 2024
20e44f9
extracted metadata from examples into separate file
kpal81xd Feb 8, 2024
b8e1dc9
extracted all examples path searching into a single file
kpal81xd Feb 8, 2024
d1b5ea5
included loadES5 in utils module when loaded
kpal81xd Feb 8, 2024
77d7725
Merge branch 'main' into examples-rework
kpal81xd Feb 8, 2024
e3a8f6d
added first version of metadata building for examples
kpal81xd Feb 9, 2024
892b951
calculated default example files inside sidebar class
kpal81xd Feb 9, 2024
bc418f0
updated formatting and naming for scripts
kpal81xd Feb 9, 2024
d9bd9c7
refactor for async standalone html
kpal81xd Feb 9, 2024
55468ef
fixed import bug on windows
kpal81xd Feb 11, 2024
d6e2113
modified metadata generation to derive info from directory over impor…
kpal81xd Feb 11, 2024
5429a0c
removed index files
kpal81xd Feb 11, 2024
cdf3b0a
examples loaded in from module
kpal81xd Feb 11, 2024
ca2a142
fixed tween loading issue
kpal81xd Feb 11, 2024
1f22c5e
put es5 lib loading into example (temporary) and removed tween library
kpal81xd Feb 11, 2024
80d0ff5
removed import map (temporary); entire module script loaded
kpal81xd Feb 11, 2024
b7d8032
remove unused imports injection
kpal81xd Feb 12, 2024
69be7f3
removed umused es5lbis injection
kpal81xd Feb 12, 2024
5233863
added blob cleanup on unload
kpal81xd Feb 12, 2024
c82bd3e
extracted pcx from args since its in global scope
kpal81xd Feb 12, 2024
69ec81f
hoisted class props to top of file
kpal81xd Feb 12, 2024
54c70dc
reverted include pcx in examples and put fire into utils
kpal81xd Feb 12, 2024
4aee8e5
removed global paths to use static locations
kpal81xd Feb 12, 2024
ddcbc29
moved canvas to inside each example
kpal81xd Feb 13, 2024
994662e
removed unused canvas element in example template
kpal81xd Feb 13, 2024
9f8954d
removed generating empty module
kpal81xd Feb 13, 2024
4db3499
added class config to metadata
kpal81xd Feb 13, 2024
41e10fe
prebuild config for each example and pass in as module
kpal81xd Feb 13, 2024
274d213
cleaned up examples config
kpal81xd Feb 13, 2024
c8cc836
changed exporting of example classes format to all be the same
kpal81xd Feb 13, 2024
3b6a6d2
removed each example class and replaced with exports for controls and…
kpal81xd Feb 13, 2024
73812bc
remove examples args; put data in window scope and getDeviceType in u…
kpal81xd Feb 13, 2024
67a406b
extracted ministats info into separate module
kpal81xd Feb 13, 2024
81e26c5
Cleaned up app starting
kpal81xd Feb 14, 2024
9853106
fixed types for example ministats module
kpal81xd Feb 14, 2024
883c563
in process of separating controls and example functions into separate…
kpal81xd Feb 14, 2024
16639df
finished split of examples and controls into separate files
kpal81xd Feb 14, 2024
e445437
Updated controls build to use module style
kpal81xd Feb 14, 2024
8ceeca3
Changed default controls for each example
kpal81xd Feb 14, 2024
7ef1dd5
refactor to use local setType in gizmo example
kpal81xd Feb 14, 2024
995569b
added import pc to top of controls file (fixes linting)
kpal81xd Feb 14, 2024
7fd3a28
Removed example function and eslint fix attempt for all examples
kpal81xd Feb 14, 2024
6d14072
eslint fix attempt for all examples
kpal81xd Feb 14, 2024
0d493a8
fixed all examples to use single quotes
kpal81xd Feb 14, 2024
62b5bc6
Updated examples only module names
kpal81xd Feb 14, 2024
f9c7601
added canvas check to each example
kpal81xd Feb 14, 2024
ba95233
fixed error restart for example
kpal81xd Feb 15, 2024
955d6d2
Disabled regenerating controls every change to code editor
kpal81xd Feb 15, 2024
c9206c2
updated monaco editor
kpal81xd Feb 15, 2024
e9d9661
formatted and removed unused vars in components
kpal81xd Feb 15, 2024
82a3623
added placeholder object for files for module import
kpal81xd Feb 15, 2024
05f4c40
remove files object from global scope
kpal81xd Feb 15, 2024
7c83d34
added files module comment
kpal81xd Feb 15, 2024
e904bf3
added syntax highlighting to shaders
kpal81xd Feb 15, 2024
c4fd6c9
Merge branch 'main' into examples-rework
kpal81xd Feb 15, 2024
ad2c284
fixed focusing in gizmo example
kpal81xd Feb 15, 2024
ca0f607
reverted monaco update
kpal81xd Feb 15, 2024
5ae21ad
fixed pathing issue
kpal81xd Feb 15, 2024
1824956
renamed assetPaths to paths
kpal81xd Feb 15, 2024
3afe292
renaming components to uppercase
kpal81xd Feb 15, 2024
cc373f8
fixed pathing issue with double slash
kpal81xd Feb 15, 2024
f53966d
updated getDeviceType to deviceType
kpal81xd Feb 15, 2024
d381d6f
moved observer to module; created loader class for example; fixed mul…
kpal81xd Feb 16, 2024
7528fff
inserted observer into examples
kpal81xd Feb 16, 2024
0d46a53
moved loader to separate file and cleaned up exposing attributes and …
kpal81xd Feb 16, 2024
5f75cf6
fixed abstracting requestedFiles event fire
kpal81xd Feb 16, 2024
8acbaec
removed temporary thumbnail files
kpal81xd Feb 16, 2024
fb88bb1
Merge branch 'main' into examples-rework
kpal81xd Feb 16, 2024
58c119d
Update examples/iframe/files.mjs
kpal81xd Feb 17, 2024
526224b
removed unnecessary ts-ignore
kpal81xd Feb 17, 2024
d7fb6c9
added config files for each example
kpal81xd Feb 17, 2024
aa9c5b3
fixed config path type and added in build standalone
kpal81xd Feb 17, 2024
ce1b4f5
cleaned up glsl code in example config
kpal81xd Feb 17, 2024
89496ed
removed old examples.config.mjs
kpal81xd Feb 17, 2024
91e6af2
cleaned up metadata path
kpal81xd Feb 17, 2024
f3cadab
removed empty controls files and used template instead
kpal81xd Feb 17, 2024
14aa93b
fixed thumbnail generation and use kebab case in all cases
kpal81xd Feb 17, 2024
950df50
updated typing to use custom event interface
kpal81xd Feb 17, 2024
8cf5ed5
updated readme for examples to include new documentation
kpal81xd Feb 17, 2024
034dddc
fixed config setting to index default prop in standalone-html
kpal81xd Feb 17, 2024
71abb13
Merge branch 'main' into examples-rework
kpal81xd Feb 19, 2024
00ad632
Merge branch 'main' into examples-rework
kpal81xd Feb 19, 2024
8fb56a4
replaced umd observer with mjs version
kpal81xd Feb 19, 2024
8b35cec
removed mapping for internal modules; removed documentation in readme
kpal81xd Feb 20, 2024
e154990
fixed spacing in loader
kpal81xd Feb 20, 2024
95acf32
updated playcanvas to use es6 build over es5
kpal81xd Feb 20, 2024
c3efc18
updated extras to use module build
kpal81xd Feb 20, 2024
25a529b
added pcx import to misc examples
kpal81xd Feb 20, 2024
e3db93d
fixed webgpu hot restart error; fixed reclick on example error
kpal81xd Feb 20, 2024
6f7947a
linting fix in sidebar
kpal81xd Feb 21, 2024
94c4238
Merge branch 'main' into examples-rework
kpal81xd Feb 21, 2024
556062a
changed wgsl example format to new system
kpal81xd Feb 21, 2024
c56f34e
converted wgsl to use new system
kpal81xd Feb 21, 2024
a01ae31
added wgsl syntax highlighting and updated glsl highlight
kpal81xd Feb 21, 2024
b9b5325
refactored themes and languages into monaco folder
kpal81xd Feb 21, 2024
4ee6dcd
added thumbnails for wgsl shader
kpal81xd Feb 21, 2024
62b0cff
added hidden functionality back when generating metadata
kpal81xd Feb 21, 2024
369f27c
Merge branch 'main' into examples-rework
kpal81xd Feb 21, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
examples loaded in from module
kpal81xd committed Feb 11, 2024
commit cdf3b0a280a89ce094c4ea3edd73aace325cf66e
30 changes: 21 additions & 9 deletions examples/iframe/example.html
Original file line number Diff line number Diff line change
@@ -16,8 +16,18 @@
<script src="./paths.js"></script>
<script src="./polyfill.js"></script>
'@IMPORTS'
<script type="importmap">
{
"imports": {
"playcanvas": "./empty.mjs",
"playcanvas-extras": "./empty.mjs"
}
}
</script>
<script type="module">
import { importScript, loadES5, buildFunction, getQueryParams, getDeviceType } from './utils.js';
import { loadES5, buildFunction, getQueryParams, getDeviceType } from './utils.mjs';
import * as Module from '@MODULE';
const ExampleClass = Object.values(Module)[0];

// constants
const canvas = document.getElementById("application-canvas");
@@ -35,8 +45,8 @@
* @type {Record<string, string | Function>}
*/
const files = {};
const EXAMPLE = '@EXAMPLE';
const CONTROLS = '@CONTROLS';
const EXAMPLE = ExampleClass.example;
const CONTROLS = ExampleClass.controls;
const FILES = '@FILES';

files['example.mjs'] = EXAMPLE.toString();
@@ -117,12 +127,11 @@
window.addEventListener('hotReload', hotReload);
window.addEventListener('destroy', destroy);

// const { pcx } = await import('./playcanvas-extras.mjs');
async function main(files) {
allowRestart = false;
await importScript('pc', '@ENGINE');
await importScript('pcx', './playcanvas-extras.js');

window.top.pc = pc;
const pcx = window.top.pcx = window.pcx;
window.top.observerData = data;

const deviceType = params.deviceType ?? getDeviceType('@WEBGPU_ENABLED');
@@ -137,7 +146,6 @@

const example = buildFunction(files['example.mjs']);
files['example.mjs'] = files['example.mjs'].toString();

app = await example({
canvas,
deviceType,
@@ -194,9 +202,13 @@
allowRestart = true;
}
}
window.onload = async () => {

document.addEventListener('DOMContentLoaded', async () => {
await import('@ENGINE');
await import('./playcanvas-extras.js');

await main(files);
}
})
</script>
</body>
</html>
16 changes: 0 additions & 16 deletions examples/iframe/utils.js → examples/iframe/utils.mjs
Original file line number Diff line number Diff line change
@@ -21,22 +21,6 @@ export function getQueryParams(url) {
.split('&').map(s => s.split('=')));
}

/**
* Can load UMD and ESM. UMD registers itself into globalThis, while ESM is handled
* to specifically to do the same, so we achieve the same result, no matter which
* target build/src we linked to.
*
* @param {string} name - The name to attach to the window.
* @param {string} src - The source url.
*/
export async function importScript(name, src) {
const module = await import(src);
const isESM = Object.keys(module).length;
if (isESM) {
window[name] = module;
}
}

/**
* @param {string} url - The URL to ES5 file.
* @returns {Promise<Object>} - The module exports
16 changes: 11 additions & 5 deletions examples/rollup.config.js
Original file line number Diff line number Diff line change
@@ -29,11 +29,7 @@ const staticFiles = [
{ src: './src/static', dest: 'dist/' },

// static iframe src
{ src: './iframe/arkit.png', dest: 'dist/iframe/arkit.png' },
{ src: './iframe/example.css', dest: 'dist/iframe/example.css' },
{ src: './iframe/paths.js', dest: 'dist/iframe/paths.js' },
{ src: './iframe/polyfill.js', dest: 'dist/iframe/polyfill.js' },
{ src: './iframe/utils.js', dest: 'dist/iframe/utils.js' },
{ src: './iframe', dest: 'dist/iframe' },

// assets used in examples
{ src: './assets', dest: 'dist/static/assets/' },
@@ -256,6 +252,16 @@ if (ENGINE_PATH === '') {
} else {
console.warn("NODE_ENV is neither production, development nor profiler.");
}
} else {
// Outputs: dist/iframe/playcanvas.dev.js
const lines = [
'window.pc = await import(\'./ENGINE_PATH/index.js\');',
''
];
fs.writeFileSync('dist/iframe/playcanvas.dev.js', lines.join('\n'), 'utf-8');
}

// Empty module file for resolving example file import
fs.writeFileSync('dist/iframe/empty.mjs', '', 'utf-8');

export default targets;
22 changes: 14 additions & 8 deletions examples/scripts/standalone-html.mjs
Original file line number Diff line number Diff line change
@@ -16,11 +16,13 @@ const EXAMPLE_HTML = fs.readFileSync(`${MAIN_DIR}/iframe/example.html`, 'utf-8')
* Choose engine based on `Example#ENGINE`, e.g. ClusteredLightingExample picks:
* static ENGINE = 'PERFORMANCE';
*
* @param {'PERFORMANCE' | 'DEBUG' | undefined} type - The engine type.
* @param {'DEVELOPMENT' | 'PERFORMANCE' | 'DEBUG' | undefined} type - The engine type.
* @returns {string} - The build file.
*/
function engineFor(type) {
switch (type) {
case 'DEVELOPMENT':
return './playcanvas.dev.js';
case 'PERFORMANCE':
return './playcanvas.prf.js';
case 'DEBUG':
@@ -45,16 +47,16 @@ function engineFor(type) {
* @property {boolean} WEBGPU_ENABLED - If webGPU is enabled.
*/
/**
* @param {string} category - The category.
* @param {string} example - The example.
* @param {string} categoryPascal - The category pascal name.
* @param {string} exampleNamePascal - The example pascal name.
* @param {ExampleClass} exampleClass - The example class.
* @returns {string} File to write as standalone example.
*/
function generateExampleFile(category, example, exampleClass) {
function generateExampleFile(categoryPascal, exampleNamePascal, exampleClass) {
let html = EXAMPLE_HTML;

// title
html = html.replace(/'@TITLE'/g, `${category}: ${example}`);
html = html.replace(/'@TITLE'/g, `${categoryPascal}: ${exampleNamePascal}`);

// es5 scripts
const es5Str = exampleClass.es5libs?.map((/** @type {string} */ src) => `<script src="${src}"></script>`).join('\n') || '<!-- no es5libs -->';
@@ -77,6 +79,9 @@ function generateExampleFile(category, example, exampleClass) {
const importsStr = `<script>${exampleClass.imports?.map((/** @type {{ toString: () => any; }} */ o) => o.toString()).join('\n\n') || ''}</script>`;
html = html.replace(/'@IMPORTS'/g, importsStr);

// module
html = html.replace(/'@MODULE'/g, JSON.stringify(`./${categoryPascal}_${exampleNamePascal}.js`));

// example
html = html.replace(/'@EXAMPLE'/g, exampleClass.example.toString());

@@ -87,9 +92,8 @@ function generateExampleFile(category, example, exampleClass) {
html = html.replace(/'@WEBGPU_ENABLED'/g, `${!!exampleClass.WEBGPU_ENABLED}`);

// engine
const engineType = process.env.NODE_ENV === 'development' ? 'DEBUG' : exampleClass.ENGINE;
const enginePath = process.env.ENGINE_PATH ?? '';
const engine = enginePath.length ? `./ENGINE_PATH/${enginePath.split('/').pop()}` : engineFor(engineType);
const engineType = process.env.ENGINE_PATH ? 'DEVELOPMENT' : process.env.NODE_ENV === 'development' ? 'DEBUG' : exampleClass.ENGINE;
const engine = engineFor(engineType);
html = html.replace(/'@ENGINE'/g, JSON.stringify(engine));

// files
@@ -121,10 +125,12 @@ async function main() {

await Promise.all(exampleMetaData.map(async (data) => {
const { categoryPascal, exampleNamePascal, path } = data;
const script = fs.readFileSync(path, 'utf-8');
const exampleImport = await import(`file://${path}`);
const exampleClass = Object.values(exampleImport)[0];
const out = generateExampleFile(categoryPascal, exampleNamePascal, exampleClass);
fs.writeFileSync(`${MAIN_DIR}/dist/iframe/${categoryPascal}_${exampleNamePascal}.html`, out);
fs.writeFileSync(`${MAIN_DIR}/dist/iframe/${categoryPascal}_${exampleNamePascal}.js`, script);
}));

return 0;