lego-dom 1.3.4 → 1.5.0

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 (93) hide show
  1. package/CHANGELOG.md +72 -1
  2. package/main.js +48 -17
  3. package/main.min.js +2 -2
  4. package/package.json +1 -1
  5. package/parse-lego.js +2 -2
  6. package/vite-plugin.js +0 -14
  7. package/.github/workflows/deploy-docs.yml +0 -56
  8. package/.legodom +0 -87
  9. package/docs/.vitepress/config.js +0 -161
  10. package/docs/api/config.md +0 -95
  11. package/docs/api/define.md +0 -58
  12. package/docs/api/directives.md +0 -50
  13. package/docs/api/globals.md +0 -29
  14. package/docs/api/index.md +0 -30
  15. package/docs/api/lifecycle.md +0 -40
  16. package/docs/api/route.md +0 -37
  17. package/docs/api/vite-plugin.md +0 -58
  18. package/docs/contributing/01-welcome.md +0 -38
  19. package/docs/contributing/02-registry.md +0 -133
  20. package/docs/contributing/03-batcher.md +0 -110
  21. package/docs/contributing/04-reactivity.md +0 -87
  22. package/docs/contributing/05-caching.md +0 -59
  23. package/docs/contributing/06-init.md +0 -136
  24. package/docs/contributing/07-observer.md +0 -72
  25. package/docs/contributing/08-snap.md +0 -140
  26. package/docs/contributing/09-diffing.md +0 -69
  27. package/docs/contributing/10-studs.md +0 -78
  28. package/docs/contributing/11-scanner.md +0 -117
  29. package/docs/contributing/12-render.md +0 -138
  30. package/docs/contributing/13-directives.md +0 -243
  31. package/docs/contributing/14-events.md +0 -57
  32. package/docs/contributing/15-router.md +0 -57
  33. package/docs/contributing/16-state.md +0 -47
  34. package/docs/contributing/17-legodom.md +0 -48
  35. package/docs/contributing/index.md +0 -24
  36. package/docs/examples/form.md +0 -42
  37. package/docs/examples/index.md +0 -104
  38. package/docs/examples/routing.md +0 -409
  39. package/docs/examples/sfc-showcase.md +0 -34
  40. package/docs/examples/todo-app.md +0 -383
  41. package/docs/guide/cdn-usage.md +0 -354
  42. package/docs/guide/components.md +0 -418
  43. package/docs/guide/directives.md +0 -539
  44. package/docs/guide/directory-structure.md +0 -248
  45. package/docs/guide/faq.md +0 -210
  46. package/docs/guide/getting-started.md +0 -262
  47. package/docs/guide/index.md +0 -88
  48. package/docs/guide/lifecycle.md +0 -525
  49. package/docs/guide/quick-start.md +0 -49
  50. package/docs/guide/reactivity.md +0 -415
  51. package/docs/guide/routing.md +0 -334
  52. package/docs/guide/server-side.md +0 -134
  53. package/docs/guide/sfc.md +0 -464
  54. package/docs/guide/templating.md +0 -388
  55. package/docs/index.md +0 -160
  56. package/docs/public/logo.svg +0 -17
  57. package/docs/router/basic-routing.md +0 -103
  58. package/docs/router/cold-entry.md +0 -91
  59. package/docs/router/history.md +0 -69
  60. package/docs/router/index.md +0 -73
  61. package/docs/router/resolver.md +0 -74
  62. package/docs/router/surgical-swaps.md +0 -134
  63. package/docs/tutorial/01-project-setup.md +0 -152
  64. package/docs/tutorial/02-your-first-component.md +0 -226
  65. package/docs/tutorial/03-adding-routes.md +0 -279
  66. package/docs/tutorial/04-multi-page-app.md +0 -329
  67. package/docs/tutorial/05-state-and-globals.md +0 -285
  68. package/docs/tutorial/index.md +0 -40
  69. package/examples/vite-app/README.md +0 -71
  70. package/examples/vite-app/index.html +0 -42
  71. package/examples/vite-app/package.json +0 -18
  72. package/examples/vite-app/src/app.css +0 -3
  73. package/examples/vite-app/src/app.js +0 -29
  74. package/examples/vite-app/src/components/app-navbar.lego +0 -34
  75. package/examples/vite-app/src/components/customers/customer-details.lego +0 -24
  76. package/examples/vite-app/src/components/customers/customer-orders.lego +0 -21
  77. package/examples/vite-app/src/components/customers/order-list.lego +0 -55
  78. package/examples/vite-app/src/components/greeting-card.lego +0 -41
  79. package/examples/vite-app/src/components/sample-component.lego +0 -75
  80. package/examples/vite-app/src/components/shells/customers-shell.lego +0 -21
  81. package/examples/vite-app/src/components/side-menu.lego +0 -46
  82. package/examples/vite-app/src/components/todo-list.lego +0 -239
  83. package/examples/vite-app/src/components/widgets/user-card.lego +0 -27
  84. package/examples/vite-app/vite.config.js +0 -22
  85. package/tests/error.test.js +0 -74
  86. package/tests/main.test.js +0 -103
  87. package/tests/memory.test.js +0 -68
  88. package/tests/monitoring.test.js +0 -74
  89. package/tests/naming.test.js +0 -74
  90. package/tests/parse-lego.test.js +0 -65
  91. package/tests/security.test.js +0 -67
  92. package/tests/server.test.js +0 -114
  93. package/tests/syntax.test.js +0 -67
package/examples/vite-app/README.md DELETED
@@ -1,71 +0,0 @@
1
- # Lego SFC and Vite Plugin Example
2
-
3
- This example demonstrates how to use Lego with Single File Components (.lego files) and the Vite plugin.
4
-
5
- ## Setup
6
-
7
- 1. Install dependencies:
8
- ```bash
9
- npm install
10
- ```
11
-
12
- 2. Run the dev server:
13
- ```bash
14
- npm run dev
15
- ```
16
-
17
- 3. Open your browser to the URL shown (usually `http://localhost:5173`)
18
-
19
- ## Structure
20
-
21
- ```
22
- examples/vite-app/
23
- ├── src/
24
- │ ├── components/ # .lego files auto-discovered here
25
- │ │ ├── sample-component.lego
26
- │ │ └── greeting-card.lego
27
- │ └── main.js # Entry point
28
- ├── index.html # HTML shell
29
- ├── vite.config.js # Vite configuration with lego plugin
30
- └── package.json
31
- ```
32
-
33
- ## How It Works
34
-
35
- 1. The Vite plugin scans `src/components/` for `.lego` files
36
- 2. Each `.lego` file is parsed and transformed into a `Lego.define()` call
37
- 3. The virtual module `virtual:lego-components` imports all discovered components
38
- 4. Components are automatically registered and available in your HTML
39
-
40
- ## Creating Components
41
-
42
- Create a new `.lego` file in `src/components/`:
43
-
44
- ```html
45
- <template>
46
- <h1>{{ message }}</h1>
47
- <button @click="count++">{{ count }}</button>
48
- </template>
49
-
50
- <script>
51
- export default {
52
- message: 'Hello!',
53
- count: 0
54
- }
55
- </script>
56
-
57
- <style>
58
- self {
59
- display: block;
60
- padding: 1rem;
61
- }
62
- </style>
63
- ```
64
-
65
- Then use it in your HTML:
66
-
67
- ```html
68
- <your-component-name></your-component-name>
69
- ```
70
-
71
- The component name is automatically derived from the filename (kebab-case required).
package/examples/vite-app/index.html DELETED
@@ -1,42 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Lego Vite Example</title>
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- max-width: 800px;
12
- margin: 2rem auto;
13
- padding: 0 1rem;
14
- background: #f9fafb;
15
- }
16
-
17
- h1 {
18
- color: #1f2937;
19
- border-bottom: 3px solid #4f46e5;
20
- padding-bottom: 0.5rem;
21
- }
22
-
23
- .info {
24
- background: white;
25
- padding: 1rem;
26
- border-radius: 0.5rem;
27
- margin: 1rem 0;
28
- border-left: 4px solid #10b981;
29
- }
30
- </style>
31
- </head>
32
-
33
- <body>
34
- <app-navbar></app-navbar>
35
- <side-menu></side-menu>
36
- <lego-router id="app-outlet"></lego-router>
37
- <aside id="outside-router"></aside>
38
-
39
- <script type="module" src="/src/app.js"></script>
40
- </body>
41
-
42
- </html>
package/examples/vite-app/package.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "name": "lego-vite-example",
3
- "version": "1.0.0",
4
- "type": "module",
5
- "scripts": {
6
- "dev": "vite",
7
- "build": "vite build",
8
- "preview": "vite preview"
9
- },
10
- "dependencies": {
11
- "@tailwindcss/vite": "^4.1.18",
12
- "lego-dom": "file:../..",
13
- "tailwindcss": "^4.1.18"
14
- },
15
- "devDependencies": {
16
- "vite": "^5.0.0"
17
- }
18
- }
package/examples/vite-app/src/app.css DELETED
@@ -1,3 +0,0 @@
1
- h1 {
2
- color: red !important;
3
- }
package/examples/vite-app/src/app.js DELETED
@@ -1,29 +0,0 @@
1
- // Import Tailwind CSS
2
- import './app.css';
3
-
4
- // Import Lego core (local for testing)
5
- import { Lego } from '../../../lego.js';
6
-
7
- // Import virtual module that auto-discovers and registers all .lego components
8
- import registerComponents from 'virtual:lego-components';
9
-
10
- // Register all auto-discovered components
11
- registerComponents();
12
-
13
- // 10. Define SPA Routes
14
- Lego.route('/', 'sample-component');
15
- Lego.route('/todo', 'todo-list');
16
- Lego.route('/card', 'user-card');
17
- Lego.route('/customers/:id/orders', 'customer-orders');
18
- Lego.route('/customers/:id/details', 'customer-details');
19
-
20
- // 11. Optional: Add a middleware example
21
- Lego.route('/admin', 'admin-panel', async (params, globals) => {
22
- console.log('Checking permissions for', params);
23
- return globals.isLoggedIn;
24
- });
25
-
26
- // Initialize Lego
27
- await Lego.init(document.body, {
28
- tailwind: ['/src/app.css']
29
- })
package/examples/vite-app/src/components/app-navbar.lego DELETED
@@ -1,34 +0,0 @@
1
- <style>
2
- self {
3
- display: block;
4
- padding: 1rem;
5
- background: #f9fafb;
6
- border-bottom: 1px solid #e0e0e0;
7
- }
8
-
9
- nav {
10
- display: flex;
11
- justify-content: space-between;
12
- align-items: center;
13
- }
14
- </style>
15
-
16
- <template>
17
- <nav>
18
- <ul>
19
- <li><a href="/" b-target="#outside-router" b-link="true">Home</a></li>
20
- <li><a href="/todo" b-target>Todo</a></li>
21
- <li><a href="/card" b-target>Card</a></li>
22
- <li><a href="/customers/1/orders">Customers</a></li>
23
- </ul>
24
- </nav>
25
- </template>
26
-
27
- <script>
28
- export default {
29
- name: 'AppNavbar',
30
- mounted() {
31
- console.log('This is mounted');
32
- }
33
- }
34
- </script>
package/examples/vite-app/src/components/customers/customer-details.lego DELETED
@@ -1,24 +0,0 @@
1
- <template>
2
- <customers-shell>
3
- <div style="padding: 1rem; border: 1px dashed #4f46e5;">
4
- <h3>👤 Customer Profile</h3>
5
- <p>Details for Customer ID: <strong>{{ global.$route.params.id }}</strong></p>
6
-
7
- <div style="display: grid; gap: 0.5rem; margin-top: 1rem;">
8
- <div><strong>Status:</strong> Premium Member</div>
9
- <div><strong>Joined:</strong> January 2024</div>
10
- <div><strong>Region:</strong> Europe</div>
11
- </div>
12
-
13
- <div style="margin-top: 1rem;">
14
- <a href="/customers/{{ global.$route.params.id }}/orders" b-target="#todo-container">View Orders</a>
15
- </div>
16
- </div>
17
- </customers-shell>
18
- </template>
19
-
20
- <script>
21
- export default {
22
- name: 'CustomerDetails'
23
- }
24
- </script>
package/examples/vite-app/src/components/customers/customer-orders.lego DELETED
@@ -1,21 +0,0 @@
1
- <template>
2
- <customers-shell>
3
- <div style="padding: 1rem; border: 1px dashed #ccc;">
4
- <h3>📦 Order History</h3>
5
- <p>Viewing orders for Customer ID: <strong>{{ global.$route.params.id }}</strong></p>
6
-
7
- <!-- Composition: Using another component inside -->
8
- <order-list></order-list>
9
-
10
- <div style="margin-top: 1rem;">
11
- <a href="/customers/{{ global.$route.params.id }}/details" b-target="#todo-container">View Profile Info</a>
12
- </div>
13
- </div>
14
- </customers-shell>
15
- </template>
16
-
17
- <script>
18
- export default {
19
- name: 'CustomerOrders'
20
- }
21
- </script>
package/examples/vite-app/src/components/customers/order-list.lego DELETED
@@ -1,55 +0,0 @@
1
- <style>
2
- ul {
3
- list-style: none;
4
- padding: 0;
5
- }
6
-
7
- li {
8
- padding: 0.5rem;
9
- border: 1px solid #eee;
10
- margin-bottom: 0.5rem;
11
- border-radius: 4px;
12
- display: flex;
13
- justify-content: space-between;
14
- }
15
-
16
- .status {
17
- font-weight: bold;
18
- color: #059669;
19
- }
20
- </style>
21
-
22
- <template>
23
- <div>
24
- <h4>Recent Orders</h4>
25
- <p b-show="loading">Loading orders for customer...</p>
26
- <ul b-show="!loading">
27
- <li b-for="order in orders">
28
- <span>Order #{{ order.id }}</span>
29
- <span class="status">{{ order.status }}</span>
30
- </li>
31
- </ul>
32
- </div>
33
- </template>
34
-
35
- <script>
36
- export default {
37
- name: 'OrderList',
38
- state: {
39
- orders: [],
40
- loading: true
41
- },
42
- async mounted() {
43
- // Simulate API fetch using the customer ID from parent or global params
44
- const customerId = Lego.globals.$route.params.id;
45
- setTimeout(() => {
46
- this.orders = [
47
- { id: '101', status: 'Delivered' },
48
- { id: '105', status: 'Shipped' },
49
- { id: '110', status: 'Processing' }
50
- ];
51
- this.loading = false;
52
- }, 800);
53
- }
54
- }
55
- </script>
package/examples/vite-app/src/components/greeting-card.lego DELETED
@@ -1,41 +0,0 @@
1
- <style>
2
- self {
3
- display: block;
4
- padding: 1rem;
5
- background: #f3f4f6;
6
- border-radius: 0.5rem;
7
- margin: 0.5rem 0;
8
- }
9
-
10
- input {
11
- padding: 0.5rem;
12
- border: 1px solid #d1d5db;
13
- border-radius: 0.25rem;
14
- margin-right: 0.5rem;
15
- font-size: 1rem;
16
- }
17
-
18
- .greeting {
19
- margin-top: 1rem;
20
- padding: 1rem;
21
- background: white;
22
- border-radius: 0.25rem;
23
- font-size: 1.25rem;
24
- color: #1f2937;
25
- }
26
- </style>
27
-
28
- <template>
29
- <div>
30
- <input b-sync="name" type="text" placeholder="Enter your name">
31
- <div class="greeting" b-show="name">
32
- Hello, {{ name }}! 👋
33
- </div>
34
- </div>
35
- </template>
36
-
37
- <script>
38
- export default {
39
- name: ''
40
- }
41
- </script>
package/examples/vite-app/src/components/sample-component.lego DELETED
@@ -1,75 +0,0 @@
1
- <style>
2
- self {
3
- display: block;
4
- padding: 1.5rem;
5
- margin: 1rem 0;
6
- border: 2px solid #4f46e5;
7
- border-radius: 0.5rem;
8
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
9
- color: white;
10
- font-family: system-ui, -apple-system, sans-serif;
11
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
12
- }
13
-
14
- .header {
15
- font-size: 1.5rem;
16
- font-weight: bold;
17
- margin-bottom: 0.5rem;
18
- }
19
-
20
- .content {
21
- margin: 1rem 0;
22
- line-height: 1.6;
23
- }
24
-
25
- button {
26
- background: white;
27
- color: #4f46e5;
28
- border: none;
29
- padding: 0.5rem 1rem;
30
- border-radius: 0.25rem;
31
- font-weight: 600;
32
- cursor: pointer;
33
- transition: transform 0.2s;
34
- }
35
-
36
- button:hover {
37
- transform: scale(1.05);
38
- }
39
-
40
- .count {
41
- display: inline-block;
42
- background: rgba(255, 255, 255, 0.2);
43
- padding: 0.25rem 0.75rem;
44
- border-radius: 0.25rem;
45
- margin-left: 0.5rem;
46
- }
47
- </style>
48
-
49
- <template>
50
- <div class="header">{{ title }}</div>
51
- <div class="content">
52
- <p class="gobe">This is a sample Lego component loaded from a .lego file!</p>
53
- <p>Message: {{ message }}</p>
54
- </div>
55
- <button @click="incrementCount()">
56
- Click me!
57
- <span class="count">{{ count }}</span>
58
- </button>
59
- </template>
60
-
61
- <script>
62
- export default {
63
- title: 'Sample Component',
64
- message: 'Hello from .lego file!',
65
- count: 0,
66
-
67
- incrementCount() {
68
- this.count++;
69
- },
70
-
71
- mounted() {
72
- console.log('Sample component mounted!');
73
- }
74
- }
75
- </script>
package/examples/vite-app/src/components/shells/customers-shell.lego DELETED
@@ -1,21 +0,0 @@
1
- <style>
2
- self {
3
- display: block;
4
- padding: 1rem;
5
- background: #f9fafb;
6
- border-bottom: 1px solid #e0e0e0;
7
- }
8
- </style>
9
-
10
- <template>
11
- <div>
12
- <h2>Customers Shell</h2>
13
- <slot></slot>
14
- </div>
15
- </template>
16
-
17
- <script>
18
- export default {
19
- name: 'CustomersShell'
20
- }
21
- </script>
package/examples/vite-app/src/components/side-menu.lego DELETED
@@ -1,46 +0,0 @@
1
- <style>
2
- /* @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght@400;700&display=swap'; */
3
- self {
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
- justify-content: center;
8
- }
9
- .tooltipped:hover .tooltip {
10
- visibility: visible;
11
- }
12
- .tooltip {
13
- visibility: hidden;
14
- width: 120px;
15
- background-color: black;
16
- color: #fff;
17
- text-align: center;
18
- border-radius: 5px;
19
- padding: 5px 0;
20
- position: absolute;
21
- z-index: 1;
22
- bottom: 125%;
23
- left: 50%;
24
- margin-left: -60px;
25
- }
26
- </style>
27
-
28
- <template>
29
- <div>
30
- <span b-for="menu in [
31
- { icon: 'home', name: 'Home' },
32
- { icon: 'mail', name: 'Mail' },
33
- { icon: 'calendar', name: 'Calendar' },
34
- { icon: 'person', name: 'Profile' },
35
- ]">
36
- <p>[[ menu.name ]]</p>
37
- </span>
38
- </div>
39
- <p>[[ name ]]</p>
40
- </template>
41
-
42
- <script>
43
- export default {
44
- name: 'side-menu'
45
- }
46
- </script>