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