Consider removing codemirror

[greggman]

We don't allow editing so it's not entirely clear what the point of having codemirror (a large dependency) is here. We could switch to plain HTML and a syntax highlighter.

There's no rush. Just thinking out loud. Switching from one dependency (codemirror) to another like say (highlight.js is a different dependency though it would run at build time.

[kainino0x]

Agree, though, I would love to allow editing... I keep thinking it would be really useful if the samples worked more like WebGPU Fundamentals. Currently when I need to test something in WebGPU I usually start with a random sample from Fundamentals and edit it.

[greggman]

We could try using this: https://github.com/google/playground-elements

I thought about making webgpufundamentals have a typescript version using that. I don't want to maintain 2 versions of every article and sample though so I'd have to generate JS versions from TS versions and remove any injected extra stuff. Harder, I'd need to change all the articles to have TS and then strip the types from the code snippets for the JS. I don't know if there's an easy pattern that would handle that. The snippets are not valid code.

In any case, that playground-elements stuff there if we want to try to get it to work in this repo

In webgpufundamentals, one area that was annoying is that when the JS is put into the live editor and served from a blob, the URLs are now blob relative so import './some-file.js' needs to be changed to import 'https://webgpufundamentals.org/path/to/some-file.js'. That's relatively easy for the pattern /^import(.*?)'(.*?)';$/ and or HTML <link>, etc but random strings to textures is harder to find. The hacky solution there was to add /* webgpufundamentals: url */ just after any string that's a URL.

I guess that 2nd part (making a sample run from a different domain) is separate from editing live. So as an intermediate step, an "export to [playcode/stackblitz/...]" would be a first step, separate from having a live editor. One other thing that makes it more difficult is, do you export all the files and if so which ones. For example, you'd want to export the .wsgl files otherwise you can't edit them. You'd also probably need to geometry files. But not images/videos but CSs? Anyway ....

[kainino0x]

Readonly source on webgpu-samples plus a link to an editable playground would be totally fine and simpler to maintain. I don't know how to best deal with the imports and paths and resource files though...

Harder, I'd need to change all the articles to have TS and then strip the types from the code snippets for the JS. I don't know if there's an easy pattern that would handle that. The snippets are not valid code.

It might be a bunch of work to change, but maybe snippets could have hidden code around them that makes them valid code. For example Rust "documentation tests" have a feature like this (see # here).

Typescript should preserve comments pretty well so maybe it could be done with comments: