lego-dom 1.3.4 → 1.4.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 (91) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/main.js +24 -3
  3. package/package.json +1 -1
  4. package/vite-plugin.js +0 -14
  5. package/.github/workflows/deploy-docs.yml +0 -56
  6. package/.legodom +0 -87
  7. package/docs/.vitepress/config.js +0 -161
  8. package/docs/api/config.md +0 -95
  9. package/docs/api/define.md +0 -58
  10. package/docs/api/directives.md +0 -50
  11. package/docs/api/globals.md +0 -29
  12. package/docs/api/index.md +0 -30
  13. package/docs/api/lifecycle.md +0 -40
  14. package/docs/api/route.md +0 -37
  15. package/docs/api/vite-plugin.md +0 -58
  16. package/docs/contributing/01-welcome.md +0 -38
  17. package/docs/contributing/02-registry.md +0 -133
  18. package/docs/contributing/03-batcher.md +0 -110
  19. package/docs/contributing/04-reactivity.md +0 -87
  20. package/docs/contributing/05-caching.md +0 -59
  21. package/docs/contributing/06-init.md +0 -136
  22. package/docs/contributing/07-observer.md +0 -72
  23. package/docs/contributing/08-snap.md +0 -140
  24. package/docs/contributing/09-diffing.md +0 -69
  25. package/docs/contributing/10-studs.md +0 -78
  26. package/docs/contributing/11-scanner.md +0 -117
  27. package/docs/contributing/12-render.md +0 -138
  28. package/docs/contributing/13-directives.md +0 -243
  29. package/docs/contributing/14-events.md +0 -57
  30. package/docs/contributing/15-router.md +0 -57
  31. package/docs/contributing/16-state.md +0 -47
  32. package/docs/contributing/17-legodom.md +0 -48
  33. package/docs/contributing/index.md +0 -24
  34. package/docs/examples/form.md +0 -42
  35. package/docs/examples/index.md +0 -104
  36. package/docs/examples/routing.md +0 -409
  37. package/docs/examples/sfc-showcase.md +0 -34
  38. package/docs/examples/todo-app.md +0 -383
  39. package/docs/guide/cdn-usage.md +0 -354
  40. package/docs/guide/components.md +0 -418
  41. package/docs/guide/directives.md +0 -539
  42. package/docs/guide/directory-structure.md +0 -248
  43. package/docs/guide/faq.md +0 -210
  44. package/docs/guide/getting-started.md +0 -262
  45. package/docs/guide/index.md +0 -88
  46. package/docs/guide/lifecycle.md +0 -525
  47. package/docs/guide/quick-start.md +0 -49
  48. package/docs/guide/reactivity.md +0 -415
  49. package/docs/guide/routing.md +0 -334
  50. package/docs/guide/server-side.md +0 -134
  51. package/docs/guide/sfc.md +0 -464
  52. package/docs/guide/templating.md +0 -388
  53. package/docs/index.md +0 -160
  54. package/docs/public/logo.svg +0 -17
  55. package/docs/router/basic-routing.md +0 -103
  56. package/docs/router/cold-entry.md +0 -91
  57. package/docs/router/history.md +0 -69
  58. package/docs/router/index.md +0 -73
  59. package/docs/router/resolver.md +0 -74
  60. package/docs/router/surgical-swaps.md +0 -134
  61. package/docs/tutorial/01-project-setup.md +0 -152
  62. package/docs/tutorial/02-your-first-component.md +0 -226
  63. package/docs/tutorial/03-adding-routes.md +0 -279
  64. package/docs/tutorial/04-multi-page-app.md +0 -329
  65. package/docs/tutorial/05-state-and-globals.md +0 -285
  66. package/docs/tutorial/index.md +0 -40
  67. package/examples/vite-app/README.md +0 -71
  68. package/examples/vite-app/index.html +0 -42
  69. package/examples/vite-app/package.json +0 -18
  70. package/examples/vite-app/src/app.css +0 -3
  71. package/examples/vite-app/src/app.js +0 -29
  72. package/examples/vite-app/src/components/app-navbar.lego +0 -34
  73. package/examples/vite-app/src/components/customers/customer-details.lego +0 -24
  74. package/examples/vite-app/src/components/customers/customer-orders.lego +0 -21
  75. package/examples/vite-app/src/components/customers/order-list.lego +0 -55
  76. package/examples/vite-app/src/components/greeting-card.lego +0 -41
  77. package/examples/vite-app/src/components/sample-component.lego +0 -75
  78. package/examples/vite-app/src/components/shells/customers-shell.lego +0 -21
  79. package/examples/vite-app/src/components/side-menu.lego +0 -46
  80. package/examples/vite-app/src/components/todo-list.lego +0 -239
  81. package/examples/vite-app/src/components/widgets/user-card.lego +0 -27
  82. package/examples/vite-app/vite.config.js +0 -22
  83. package/tests/error.test.js +0 -74
  84. package/tests/main.test.js +0 -103
  85. package/tests/memory.test.js +0 -68
  86. package/tests/monitoring.test.js +0 -74
  87. package/tests/naming.test.js +0 -74
  88. package/tests/parse-lego.test.js +0 -65
  89. package/tests/security.test.js +0 -67
  90. package/tests/server.test.js +0 -114
  91. 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>