{"_id":"@bmelicque/yauil","_rev":"1-a21586fb1f8fe069c8d2eb74c584846e","name":"@bmelicque/yauil","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@bmelicque/yauil","version":"0.1.0","description":"Basic UI lib","author":{"name":"bmelicque"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","repository":{"url":"git+https://github.com/bmelicque/yauil.git"},"scripts":{"test":"jest","dev":"esbuild ./src/index.tsx --bundle --outfile=/dist/dev.js --target=es6 --watch","build":"tsup src/index.tsx --format cjs,esm --dts"},"license":"ISC","devDependencies":{"@types/jest":"^29.5.3","esbuild":"^0.19.11","jest":"^29.6.2","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","tsup":"^7.2.0","typescript":"^5.0.4"},"gitHead":"20cf6f1a72a6d7693ef189db2bc3d91b62dbb341","bugs":{"url":"https://github.com/bmelicque/yauil/issues"},"homepage":"https://github.com/bmelicque/yauil#readme","_id":"@bmelicque/yauil@0.1.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-k7FcsEiqtlqAhdZoSb0rXwviGwbshBA3+epiUizo3VMcqCjNhyJYpQ8sTDx1GvEtVf2wjZWQLQfkgmOp0KujfA==","shasum":"8237b89b594a4e699beed61d7c2b93bb2916673e","tarball":"https://registry.npmjs.org/@bmelicque/yauil/-/yauil-0.1.0.tgz","fileCount":2,"unpackedSize":3753,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMOW1OK0bvfJUHcPbgZTcc6opp56o9+lcMrLfTAorJwAIhAIGENoKCDA92Lg3OEK0iXuE26MDtSPpcgXVRtNHQjsy3"}]},"_npmUser":{"name":"bmelicque","email":"bmelicque@gmail.com"},"directories":{},"maintainers":[{"name":"bmelicque","email":"bmelicque@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yauil_0.1.0_1705523298220_0.7311873076758071"},"_hasShrinkwrap":false},"0.1.1":{"name":"@bmelicque/yauil","version":"0.1.1","description":"Basic UI lib","author":{"name":"bmelicque"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","repository":{"url":"git+https://github.com/bmelicque/yauil.git"},"scripts":{"test":"jest","dev":"esbuild ./src/index.tsx --bundle --outfile=/dist/dev.js --target=es6 --watch","build":"tsup src/index.tsx --format cjs,esm --dts"},"license":"ISC","devDependencies":{"@types/jest":"^29.5.3","esbuild":"^0.19.11","jest":"^29.6.2","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","tsup":"^7.2.0","typescript":"^5.0.4"},"gitHead":"764f1f76229a2ae0955dbe7483492ba0c22e6663","bugs":{"url":"https://github.com/bmelicque/yauil/issues"},"homepage":"https://github.com/bmelicque/yauil#readme","_id":"@bmelicque/yauil@0.1.1","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-5yPaPqNTU6n/72yRdZasFWoOOfNfkbwCgNi3euSLmDfOTblqI2JgELxCmYhmi0ModV/BAKwC4PNvN8kjJxACqA==","shasum":"de22aecba84711bea28b3dd2f28d5d3bc5006603","tarball":"https://registry.npmjs.org/@bmelicque/yauil/-/yauil-0.1.1.tgz","fileCount":6,"unpackedSize":38805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCGtOU5+KG/vOkpbfbiA0N2DNhMnRKdxy+GuzloibzIAiEA5fCXm8MabyuEA27Fhdsv9wDl2JrChps36J5/oAWgnUA="}]},"_npmUser":{"name":"bmelicque","email":"bmelicque@gmail.com"},"directories":{},"maintainers":[{"name":"bmelicque","email":"bmelicque@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yauil_0.1.1_1705523544117_0.14870652117116867"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-17T20:28:18.121Z","0.1.0":"2024-01-17T20:28:18.349Z","modified":"2024-01-17T20:32:24.484Z","0.1.1":"2024-01-17T20:32:24.301Z"},"maintainers":[{"name":"bmelicque","email":"bmelicque@gmail.com"}],"description":"Basic UI lib","homepage":"https://github.com/bmelicque/yauil#readme","repository":{"url":"git+https://github.com/bmelicque/yauil.git"},"author":{"name":"bmelicque"},"bugs":{"url":"https://github.com/bmelicque/yauil/issues"},"license":"ISC","readme":"# What's Yauil?\r\n\r\n**Yauil** (standing for _Yet Another UI Library_, or _Why Another UI Library?_) is, as its name implies, a frontend framework/library.\r\n\r\nIt's a personnal porject with the objective of learning, designed to be lightweight a TypeScript-first.\r\n\r\n**Please don't use this in production**\r\n\r\n# Motivation\r\n\r\nThis is basically an exercize for me as a junior dev. It will probably not be maintained.\r\n\r\nA few things I've learned:\r\n\r\n- Extending functions\r\n- Complex DOM manipulations\r\n- Symbols as object keys (did you know they were non-enumerable by default? it took me weeks to figure it out!)\r\n- Proxies are tricky\r\n- \"Best practices\" sometimes make things much harder, and the gain's not that great with only ~600 LoC\r\n\r\n# A basic component\r\n\r\n```jsx\r\nimport { createComputed, createSignal, jsx } from \"yauil\";\r\n\r\nfunction Counter() {\r\n\tconst count = createSignal(0);\r\n\tconst doubleCount = createComputed(() => count() * 2);\r\n\r\n\tconsole.log(\"This runs only once\");\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<button onclick={() => count.set((val) => val + 1)}>+ 1</button>\r\n\t\t\t<p>\r\n\t\t\t\t{doubleCount} is the double of {count}\r\n\t\t\t</p>\r\n\t\t</>\r\n\t);\r\n}\r\n```\r\n\r\nYauil uses functions and JSX to create components. Contrary to React, functions are constructors that are only run once. Yauil uses no virtual DOM and uses signals to update the real DOM.\r\n\r\n# Signals, Computed & Stores\r\n\r\nSimple reactive values may be created with `createSignal`. They may be used as-is in JSX:\r\n\r\n```jsx\r\nconst count = createSignal(0);\r\nreturn <div>{count}</div>;\r\n```\r\n\r\nSignals are unwrapped by being called:\r\n\r\n```js\r\nconst signal = createSignal(\"hi!\"); // signal is reactive\r\nconst value = signal(); // value is not\r\n```\r\n\r\nYou can set a new value with the `set` method:\r\n\r\n```js\r\nconst count = createSignal(0);\r\ncount.set(1); // count's value is now 1;\r\ncount.set((current) => current + 1); // count's value is now 2;\r\n```\r\n\r\nComputed values are created with `createComputed`. It will detect any unwrapping in its constructor to know which signals to listen to.\r\n\r\n```js\r\nconst a = createSignal(1);\r\nconst b = createSignal(2);\r\nconst sum = createComputed(() => a() + b()); // sum will listen to a and b changes\r\n```\r\n\r\nMore complex values may be created with `createStore`, which will lazily create sub-signals when needed.\r\n\r\n```js\r\nconst user = createStore({\r\n\tname: \"John\",\r\n\tage: \"42\",\r\n});\r\nconst plainName = user().name; // not reactive\r\nconst reactiveName = user.name; // reactiveName is a signal\r\n```\r\n\r\n# Built-in components\r\n\r\nYauil provides a couple built-in components, `<Show />` and `<For />`\r\n\r\n```jsx\r\nconst show = createSignal(true);\r\nreturn (\r\n\t<>\r\n\t\t<button onClick={() => show.set((current) => !current)}>Toggle</button>\r\n\t\t<Show when={show}>\r\n\t\t\t<p>This is a paragraph</p>\r\n\t\t</Show>\r\n\t</>\r\n);\r\n```\r\n\r\n```jsx\r\nconst fruits = createStore([\"apple\", \"banana\", \"orange\"]);\r\nreturn (\r\n\t<For of={fruits}>\r\n\t\t{(fruit, index) => (\r\n\t\t\t<div>\r\n\t\t\t\tFruit #{index}: {fruit}\r\n\t\t\t</div>\r\n\t\t)}\r\n\t</For>\r\n);\r\n```\r\n","readmeFilename":"README.md"}