Add new Solid.js example #2144

BasixKOR · 2021-05-16T16:52:38Z

Please use squash merge.

Hi, I created TodoMVC with Solid.js and I think it's worth sharing with y'all, so I'm proposing this to as a new app example.

It passes all the tests as you can see above.

Reason to propose the TodoMVC in Solid.js

It is one of the most perfomant UI libraries out there, according to https://github.com/krausest/js-framework-benchmark.
It is based on DOM Expressions instead of VDOMs.

Notes

Since JSHint doesn't seems to support latest JavaScript features such as JSX and modules, it was hard to match code styles using JSHint.
I bulit up custom Rollup config to work nicely with current infra. Probably a lot of space for improvement.
This example requires an build step (which is just a single rollup run). If you prefer we can track the bundle on GitHub so users can skip the build.

0xTheProDev · 2022-04-04T19:03:30Z

examples/solid/src/components/TodoList.jsx

@@ -0,0 +1,31 @@
+import { Switch, useContext } from "solid-js";


Import For?

0xTheProDev · 2022-04-04T19:04:20Z

examples/solid/src/components/App.jsx

@@ -0,0 +1,34 @@
+import { For, Show, useContext } from 'solid-js';


For is not being used

0xTheProDev · 2022-04-04T19:05:04Z

examples/solid/src/components/TodoItem.jsx

@@ -0,0 +1,46 @@
+import { createEffect, createSignal, useContext } from "solid-js";


createEffect not being used

BasixKOR added 15 commits May 16, 2021 23:07

initiallize solid example

ffdd19d

add todo to solid store

5e997d0

Fix cickoutside util to accept function

ccdccbb

Use context to share todos

0003316

Fix toggle to work globally

0e9cd0d

Implement routing

b0dabb0

Remove react favicon

e9dbc2b

Replace solid-scripts with custom rollup config

93bc295

Save only todos to localStorage

7aa0dce

Hide entire main when no todos

7cf5a6d

Trim titles

dd3ac29

Remove item if title is empty

7af63cf

Improve editing

dc20503

Fix code styles

5373024

Fix index.html on Solid exmaple

3aa5a7b

0xTheProDev reviewed Apr 4, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new Solid.js example #2144

Add new Solid.js example #2144

BasixKOR commented May 16, 2021 •

edited

0xTheProDev Apr 4, 2022

0xTheProDev Apr 4, 2022

0xTheProDev Apr 4, 2022

		@@ -0,0 +1,31 @@
		import { Switch, useContext } from "solid-js";

		@@ -0,0 +1,34 @@
		import { For, Show, useContext } from 'solid-js';

		@@ -0,0 +1,46 @@
		import { createEffect, createSignal, useContext } from "solid-js";

Add new Solid.js example #2144

Are you sure you want to change the base?

Add new Solid.js example #2144

Conversation

BasixKOR commented May 16, 2021 • edited

Reason to propose the TodoMVC in Solid.js

Notes

0xTheProDev Apr 4, 2022

Choose a reason for hiding this comment

0xTheProDev Apr 4, 2022

Choose a reason for hiding this comment

0xTheProDev Apr 4, 2022

Choose a reason for hiding this comment

BasixKOR commented May 16, 2021 •

edited