Solid Experimental

This repo contains sample of certain library integration with SolidJS Currently includes :

• Golden Layout (web based dock layout manager)
• Mounting React Component (svar-gantt)
• Google Maps and DeckGL Integration
• Vitest
• SolidStart

Dependencies

• Node JS (v22.12.0)
• PNPM package manager

Running

Install dependencies before running by executing pnpm i beforehand

• Project: pnpm run dev (open port 3011)
• Test (Vitest) pnpm run test or pnpm run test-ui

Tauri Android Configurations

install sdk 35 install ndk 28 install jdk 21

Post signing :

AppData\Local\Android\Sdk\build-tools\35.0.0>apksigner.bat sign --ks %USERPROFILE%\upload-keystore.jks --out %USERPROFILE%\app-signed.apk %USERPROFILE%\app-universal-release-unsigned.apk

If you face some build error EPERM with pnpm run prodpack when moving folder, try to shutdown development server first

Integration Roadmap

• Golden Layout - Listen and/or to as many APIs
• Golden Layout - Programmatic event possiblities
• Mounting React Components and interact with it
• Solid Gridstack or gridstack.js
• Winbox
• maxgraph (continuation of mxgraph)
• JSGantt Improved

Todo

• https://github.com/NikolaySuslov/solid-braid-quill.git

• [P9] https://github.com/adarshhegde/solid-graph-visualiser

• https://github.com/traccar/maplibre-google-maps

Notes - Golden Layout integration with SolidJS

• Similar JSX instance will replace older one when rendered twice (to mitigate this, provide function that return JSX.Element to create new instance of JSX)
• Context doesnt connect each other between different render (pass context from GoldenLayoutView as workaround, but super inconvenient :sad )

UPDATES 2026-04

• Context work now as expected (we try to keep reactive graph still intact by implement component mounting with SolidJS Portal) by using GoldenLayoutView2

Notes - react-solid-bridge

• It's outdated, works with React 17.0.2
• This library is only works inside React Enviroment. (See this example)[https://codesandbox.io/p/sandbox/react-solid-bridge-solid-app-router-7wowh], Pay attention to index.js file
• Just manually mounting ReactDOM and its Component just do the job to use React Components inside SolidJS (but cannot use jsx/tsx)

Others

tar -cvf - -p tileserver-gl-light/ | xz > tileserver-gl-light_4101_node16151.tar.xz cat my_large_archive.tar.gz.part_* > my_large_archive_reconstructed.tar.gz

Sources

ArcLayer path - visgl/deck.gl#8447 Manual ArcLayer path - https://codepen.io/chrisgervang/pen/yLwQdoe

Routing example https://valhalla1.openstreetmap.de/route?json={%22locations%22:[{%22lat%22:-6.315891,%22lon%22:106.816505,%22street%22:%22Park%22},{%22lat%22:-6.336195,%22lon%22:106.803065,%22street%22:%22Point%20Home%22}],%22costing%22:%22auto%22,%22costing_options%22:{%22auto%22:{%22country_crossing_penalty%22:2000.0}},%22units%22:%22kilometers%22,%22id%22:%22my_work_route%22,%20%22format%22:%20%22osrm%22,%20%22shape_format%22:%22geojson%22}