Create a windows based UI that is persistent in localStorage.
Demo here: https://codesandbox.io/s/solidjs-window-based-ui-demo-kmg3ib?file=/src/App.tsx:186-508
npm install solidjs-window-manager
yarn add solidjs-window-manager
src/App.tsx
import { JSX, lazy } from 'solid-js';
import { WindowManager } from 'solidjs-window-manager';
export default function App(): JSX.Element {
let windowApi;
return (
<WindowManager
loadWindow={(props) => {
// this prop is required
return lazy(() => import(/* @vite-ignore */ './windows/' + props.component));
}}
onReady={(api) => (windowApi = api)}
options={{
persistent: true, // this persists all opened windows with props, position and size in localstorage
}}
>
<div style={{ padding: '10px' }}>
<p style={{ color: 'white' }}>Desktop</p>
<p>
<button
type="button"
onClick={() => {
windowApi?.openWindow?.('MyComputer', { path: '/home/user' });
}}
>
open new window
</button>
</p>
</div>
</WindowManager>
);
}
src/windows/MyComputer.tsx
(you can change windows
folder via loadWindow
prop)
import { JSX, onMount } from 'solid-js';
export default function MyComputer(props: any): JSX.Element {
onMount(() => {
// this is how you can customize window decorator
props?.windowUpdateProps({
title: 'My computer',
// the first call to windowUpdateProps will hide the loading effect, unless you overwrite it like so
loading: true, // optional. default is false
});
setTimeout(() => {
props?.windowUpdateProps({
title: 'My computer: ' + props?.path,
loading: false, // you can change this props after a fetch, or anytime
});
}, 1500);
});
return (
<div>
<p>My computer:</p>
Path: {props?.path}
</div>
);
}
git clone https://github.com/AndreiTelteu/solidjs-window-manager
cd solidjs-window-manager/example
yarn install
yarn start
☐ | Center windows by default |
✅ | Create a taskbar |
✅ | Add support for minimize |
✅ | Support maximize |
☐ | Context menu for taskbar |
- Migrated from rollup to tsup-preset-solid
- Added window props for close, maximize and minimize. Made taskbar a bit smaller.
- Update dependencies
- Polyfill for event.path browser support. (Fixed error windows would not move)
- Suport for maximize and minimize with animations
- Created a taskbar with focus and close functionality
- windowState renamed to windowStore
- Exported windowState for external control
- Added minimum size restriction
- Save last window size and position based on component name
- Moved my state management helper in a separate package solidjs-storex
- Added support for window resizing on every side and corner
- Added EditPost window in example project to demonstrate the persistence of the window params, and the usage of windowApi from inside another window
- Made windows load from user-code.
- Added ErrorBoundry in windows.
- Added real-life example project using Vite (list posts from a demo api, with a virtual-list plugin).
- Added preview animated gif
- First version 🎉🥳
- redux-like state based on createStore
- open and move windows