What's new in Sealcode

General
1

Here are some highlights form the past few weeks

Recently landed :pilot: :airplane_arrival:

tempstream-esbuild

@JustLinuxUser has implemented compilation of JSX elements to strings. It’s going to speed up all sealious-playground-based projects without any further work on the app’s developer. Now JSX/TSX element like this:

return <div>hello {name}</div>;

instead of being turned to

return TempstreamJSX.createElement("div", {}, ["hello ", name]);

is going to be converted at build time to

return tempstream`<div>${hello} name</div>`

In this simple example it saves only one function call, but for bigger templates it can save a ton of function calls, with effectively the same resulting html and streaming benefits.

Have a look at the code here:

Assetproxy deploys

@Jakski is making great progress with scripts that will help us set up and monitor Assetproxy for our clients :fire:

Ongoing progress with isolating modules from sealious-plauground

During rapid phase of development of sealious-playground last year, some modules that should be a separate library were created within the playground repository. We’re now cleaning it up and @piotr_nowacki and @danilo-savic are pushing forward and moving those modules to separate repositories now that it doesn’t break the sealgen bundler

See these new stand-alone beauties:

WCAG contrast in Sealious Playground color picker

Thanks to @nijatbabakhanov’s efforts, the color gallery available at /dist/colors.html in SealiousPlayground now displays the WCAG contrast value so you can see how accessible the color pairings are - see the number next to the color pairs on the right

image
image1806×787 80.5 KB

HTML preview in JDD Editor

Thanks to @ziomek we now have an easy option to preview the raw HTML of component output in Open-source projects > JDD Component Debugger

Field metadata in sealgen-generated tables

Thanks to @jakub-w the headings in tables generated by sealgen now have a data-field attribute, so it’s easier for example to adjust the column width based on what field it belongs to

Disabling sort in sealgen-generated tables

@jakub-w has fixed a bug where once you clicked on a table heading and enabled sorting by that column, you could no longer easily go back to the “default” sorting. Now clicking rotates between desc→asc→disabled sort states:

New E2E tests in Sealious Playground

I’ve rewritten the test setup in Sealious Playground. It now uses Playwright. You can use npx playwright codegen to quickly generate a test case, and use await expect(page).toHaveScreenshot() to make a screenshot, so if any layout changes unexpectedly, the tests will run a diff on the snapshots and detect that fact.

You can run npm run test -- --ui to get the UI experience:

The browser runs in docker, ensuring that slight environment differences (fonts / hardware) don’t cause differences in screenshots even if the tests are ran on CI.

image
image1598×998 121 KB

New tasks to take :check_box_with_check:

There are multiple new tasks to take! Some of the highlights include:

Coming up

I’m cooking a new documentation that will encompass all crucial elements of our stack, from Image Router to Tempstream and anything in between. I will dogfood it and set it up using Sealious Playground :wink: Stay tuned!

Thanks everyone for your contributions! Keep it up :fire:

2 Likes