I’ve made some changes to Sealious Playground in order to further streamline working on JDD components. Here’s an outline of the latest changes:
Fixed sizings of columns in component preview
They now scroll independently from each other:
And the right column turns on scrolling instead of panning outside the screen (cc @ziomek - it’s what we’ve been pondering on last sealcoding)
In the screencast you can also see the component preview width being displayed at the top - done by @mates
I’ve vhanged the component previewer’s front-end code to stimulus components. They’re much more manageable that way:
- they live in files separate to the
.jdd.ts, so it’s easier to format and read them with syntax highlighting; - they are managed by stimulus in a way that prevents them loading them twice and thus helps to avoid collisions
More support for Stimulus components
You can now create a *.stimulus.ts file anywhere in the project (even in src/back) and the component contained there will be pulled by the build steps to the front-end. This will help keep logic for both the backend and front-end code next to each other in the directory tree.
You can read more about stimulus here: https://stimulus.hotwired.dev/
As usual, it’s recommended to NOT use any front-end JS code, and make everything work without JS whenever possible. JS on the front-end is for progressive enhancement and optional features - and it will be easier to manage now with stimulus controllers than the previous
<div>
<h2>Test</h2>
{/* HTML */ `<script>alert("done!")</script>`}
</div>
is now:
<div data-controller="done">
<h2>Test</h2>
</div>
and then in done.stimulus.ts:
import { Controller } from "stimulus";
export default class Done extends Controller {
connected(){
alert("done!")
}
}
External resources for JDD components
For JDD components that rely on external resources (like scripts, stylesheets), there’s now a dedicated getEarlyAssets() method. Instead of adding <script>s and <link rel="stylesheet"s to getHTML(), you can do:
async getEarlyAssets() {
return [
{
type: "script" as const,
url: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
identity: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
integrity: "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=",
},
{
type: "style" as const,
url: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css",
integrity: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=",
identity: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css",
},
];
}
This will cause the assets to be included in the <head> of the document. The identity key is important, as it is being used for deduplication. If more than one component (or instance of the same component) reports the same asset identity multiple times, it will only be included once in the resulting HTML’s <head>.
When the resource is loaded, it will emit a loaded-${identity} event, so you can wait for your resource to be loaded with:
document.addEventListener(
"loaded-https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
() => {
this.initiateMap();
}
);
I know those changes weren’t coordinated with anyone and they might cause some friction when you’ll be merging it to your branches. I’ll help with any merge troubles that might arise during merge. If there are any serious git conflicts, just ping me and I’ll stick the landing of your diffs affected by my changes 