mithril-mobs 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.html +13 -0
  2. package/package.json +2 -7
  3. package/public/vite.svg +1 -0
  4. package/src/main.js +39 -0
  5. package/test.html +83 -0
  6. /package/{src/mobs/index.js → index.js} +0 -0
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite App</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.js"></script>
12
+ </body>
13
+ </html>
package/package.json CHANGED
@@ -1,19 +1,14 @@
1
1
  {
2
2
  "name": "mithril-mobs",
3
3
  "private": false,
4
- "version": "0.0.4",
4
+ "version": "0.0.6",
5
5
  "type": "module",
6
+ "main" : "index.js",
6
7
  "scripts": {
7
8
  "dev": "vite",
8
9
  "build": "vite build",
9
10
  "preview": "vite preview"
10
11
  },
11
- "exports": {
12
- ".": "./src/mobs/index.js"
13
- },
14
- "files": [
15
- "./src/mobs/"
16
- ],
17
12
  "devDependencies": {
18
13
  "vite": "^6.3.5"
19
14
  },
package/public/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/main.js ADDED
@@ -0,0 +1,39 @@
1
+ import m from "mithril"
2
+ import { defineState, obs, repeat } from "../index";
3
+
4
+ const state = defineState('app', {
5
+ count: obs(0)
6
+ })
7
+
8
+ // Example Mithril component using if_
9
+ const Counter = {
10
+ oninit () {
11
+ state.count.subscribe(x => {
12
+ if(x == 10) {
13
+ alert("Hello")
14
+ }
15
+ })
16
+ },
17
+
18
+ view: () => { // Change this value to test different branches
19
+ return [
20
+ m('h1', 'Counter'),
21
+ m('div', [m('b', 'Count'), ': ', state.count.value]),
22
+ m('button', {
23
+ onclick () {
24
+ state.set(_ => _.count.value += 1, true)
25
+ }
26
+ }, "Increment"),
27
+ m('button', {
28
+ onclick () {
29
+ state.set(_ => _.count.value -= 1, true)
30
+ }
31
+ }, "Decrement"),
32
+ m("br"),
33
+ repeat(state.count.value).map(i => m("li", "Iter. " + i))
34
+ ];
35
+ }
36
+ };
37
+
38
+ // Mount the component
39
+ m.mount(document.getElementById('app'), Counter);
package/test.html ADDED
@@ -0,0 +1,83 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Mithril if_ chainable test</title>
7
+ <script src="https://unpkg.com/mithril/mithril.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ padding: 20px;
12
+ }
13
+ p {
14
+ margin: 0.2em 0;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <div id="app"></div>
20
+
21
+ <script>
22
+ // Chainable if_ implementation
23
+ function if_(firstCondition) {
24
+ const conditions = [firstCondition];
25
+ const vnodes = [];
26
+
27
+ const ctx = {
28
+ then(v) {
29
+ vnodes.push(v);
30
+ return prepare(ctx);
31
+ },
32
+ elseIf(newCondition) {
33
+ conditions.push(newCondition); // <- fixed
34
+ return prepare(ctx);
35
+ },
36
+ else(v) {
37
+ conditions.push(true); // the default branch
38
+ vnodes.push(v);
39
+ return prepare(ctx);
40
+ },
41
+ view() { // evaluate
42
+ for (let i = 0; i < conditions.length; i++) {
43
+ if (conditions[i]) return vnodes[i] || null;
44
+ }
45
+ return null;
46
+ }
47
+ };
48
+
49
+ return prepare(ctx)
50
+ }
51
+
52
+ function prepare(ctx) {
53
+ const n = m(ctx)
54
+ n.then = ctx.then
55
+ n.elseIf = ctx.elseIf
56
+ n.else = ctx.else
57
+ n.view = ctx.view
58
+ return n
59
+ }
60
+
61
+
62
+
63
+ // Example Mithril component using if_
64
+ const Counter = {
65
+ view: () => {
66
+ const x = 1; // Change this value to test different branches
67
+
68
+
69
+ return [
70
+ m('h1', 'Hello, World'),
71
+
72
+ if_(x > 3).then(
73
+ m('p', 'Hello, (no else)')
74
+ )
75
+ ];
76
+ }
77
+ };
78
+
79
+ // Mount the component
80
+ m.mount(document.getElementById('app'), Counter);
81
+ </script>
82
+ </body>
83
+ </html>
/package/{src/mobs/index.js → index.js} RENAMED
File without changes