Skip to content

Commit cfcf1c9

Browse files
williamthomewilliamthome
authored
Transform Arizona Svelte from demo app to hex/npm library packages (#1)
* Add Svelte integration with Arizona framework - Add Svelte 5 components (App and Counter) with modern runes syntax - Integrate esbuild-svelte plugin for component compilation - Configure Arizona client to mount Svelte components via data attributes - Update Tailwind to scan Svelte files with @source directive - Add separate build scripts for JS and CSS with dev/prod modes - Set up local Arizona dependency via _checkouts symlink * Replace esbuild with Vite and implement dynamic component system - Replace esbuild with Vite for better modern development experience - Add legacy browser support with conditional building - Create modular Arizona Svelte architecture: - ArizonaSvelteRegistry: Component storage and retrieval - ArizonaSvelteDiscovery: Auto-discovery using import.meta.glob - ArizonaSvelteLifecycle: Component mounting and lifecycle management - ArizonaSvelte: Main orchestrator class with default export - Move components to organized `/svelte/components/` structure - Implement dynamic component loading without hardcoded if/else chains - Optimize build performance: skip gzip reporting and legacy bundles in dev - Update main.js to simple 2-line usage: new ArizonaSvelte() + mountComponents() * Organize build configuration and update to Tailwind CSS v4 - Move vite.config.js and create tailwind.config.js in assets/ directory - Update CSS imports to use Tailwind v4 syntax (@import "tailwindcss") - Replace build-css.js with direct tailwind CLI commands in package.json - Add separate dev/prod build scripts with conditional minification - Update all npm scripts to reference new config file locations * Implement page re-design with enhanced styling and component system - Enable arizona.css import for custom Arizona Framework styling - Update hero background image to arizona-svelte-hero-bg.png - Add comprehensive color palette and design system classes - Implement HelloWorld component replacing basic App component - Add arizona_svelte_counter.erl module for counter component handling - Update layout and view modules for enhanced page structure - Expose Arizona client globally for component interaction - Improve component lifecycle management and error handling - Add extensive Tailwind utilities for Arizona theme colors and effects * Enhance component demo with improved UX design and architecture explanations - Redesign button styling with subtle Arizona-themed colors using low-opacity backgrounds - Replace bright/saturated button colors with harmonious teal, terracotta, and slate variants - Add comprehensive component embedding explanations and visual indicators - Implement full-height layout for balanced component display - Create custom CSS utilities for consistent button and card styling - Fix Vite build configuration to preserve app.css during rebuilds - Update component titles to use consistent brand colors (red for Svelte, terracotta for Arizona) - Add detailed descriptions of hybrid architecture where Arizona stateful components contain embedded Svelte components - Enhance accessibility with focus rings and proper color contrast - Improve visual hierarchy and reduce visual noise while maintaining interactivity * Implement interactive drag & drop Kanban demo with enhanced text visibility Enhanced HelloWorld component: - Replace static content with interactive drag & drop Kanban board - Showcase Svelte 5 features: $state runes, reactive updates, animations - Add position-based reordering with real-time preview animations - Implement proper accessibility with ARIA roles and labels - Create engaging demo of client-side reactivity and state management Improved component demo text visibility: - Apply consistent styling patterns from Arizona Server Components section - Upgrade text contrast using text-silver/90 for better readability - Structure content with clear headers and logical sections - Add developer tip highlighting client-side interactive features - Maintain design consistency across both component sections Technical improvements: - Advanced drag & drop with mouse position-based insertion - Smooth hover effects and visual feedback during drag operations - Proper event handling with drag enter/leave/over/drop - State management demonstrating Svelte's reactive capabilities * Update Arizona framework to v0.2.0 Dependency updates: - Upgrade @arizona-framework/client from v0.1.2 to v0.2.0 - Remove obsolete Vite alias configuration from vite.config.js - Update package-lock.json with new dependency versions The v0.2.0 release includes improved client-side functionality and streamlined build configuration. * Update minimum OTP version requirements * Implement comprehensive automatic component lifecycle monitoring Enhanced ArizonaSvelteLifecycle with automatic monitoring: - DOM MutationObserver for real-time component detection - Arizona WebSocket integration for HTML patch handling - Automatic mount/unmount based on DOM changes - Debounced operations to prevent excessive re-scanning - Page visibility and unload event handling - Configurable monitoring options with sensible defaults Key features: - Auto-mount: Automatically mount new components when detected - Auto-unmount: Clean up components when DOM elements are removed - WebSocket awareness: Re-scan after Arizona HTML patches - Performance optimized: 100ms debounce prevents excessive operations - Proper cleanup: All observers and timers cleaned up on page unload Usage: - arizonaSvelte.startMonitoring() - Enable automatic lifecycle - arizonaSvelte.isMonitoring() - Check monitoring status - Global debugging: window.arizonaSvelte available for inspection This ensures Svelte components are properly managed throughout the application lifecycle without manual intervention. * Enhance lifecycle demo with improved UX and logging fixes - Add LifecycleDemo Svelte component with persistent Demo Components section - Fix object logging to show proper JSON instead of [object Object] - Implement smooth auto-scroll to bottom for new log entries - Remove debounce delay (0ms) for immediate component lifecycle monitoring - Add consistent disabled states for remove buttons when no components exist - Improve log order with newest entries at bottom - Add helpful tip guiding users to Component Lifecycle Demo controls - Enhance logging with proper component details and emojis - Create persistent, styled demo container matching overall design * Transform Arizona Svelte from demo app to hex/npm library packages Complete restructuration from Erlang application to professional library: ### Package Distribution - Configure rebar.config for hex package distribution - Transform package.json to @arizona-framework/svelte NPM package - Remove arizona-framework/client dependency per requirements - Pin Svelte to version 5.39.6 and update all dependencies ### Library Structure - Remove demo application modules (app, sup, counter, layout, view) - Remove demo components (Counter, HelloWorld, LifecycleDemo) - Remove demo assets (CSS, images, config files) - Keep only core library modules: arizona_svelte, template, components - Transform to library-only helper code without demo components ### Documentation Enhancement - Add comprehensive Arizona framework style moduledoc with ~"""" - Document all functions with -doc ~""" attributes following Arizona patterns - Emphasize critical one-time binding evaluation behavior - Fix Arizona comment syntax from <!-- --> to {% Comment } - Add detailed API reference and usage examples ### JavaScript Library - Update to zero-debounce monitoring for immediate responsiveness - Improve code formatting and arrow function consistency - Add comprehensive build configuration with Vite - Include ESLint, Prettier, and testing setup - Generate minified distribution files ### Critical Behavioral Documentation - Document that arizona_template:get_binding/2 is evaluated only once - Emphasize state independence between Arizona and Svelte components - Add warnings about binding tracking limitations - Provide clear examples of one-time evaluation behavior This transforms the project from a demo application into a production-ready library suitable for hex and npm distribution.
1 parent 3245819 commit cfcf1c9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+13119
-1832
lines changed

‎.github/workflows/erlang.yml‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
name: Erlang
3+
4+
"on":
5+
push:
6+
branches:
7+
- main
8+
pull_request:
9+
branches:
10+
- "*"
11+
workflow_dispatch: {}
12+
merge_group:
13+
14+
concurrency:
15+
group: ${{github.workflow}}-${{github.ref}}
16+
cancel-in-progress: true
17+
18+
jobs:
19+
cache:
20+
name: Cache
21+
22+
runs-on: ubuntu-24.04
23+
24+
outputs:
25+
build-cache-key: ${{ steps.set-build-key.outputs.key }}
26+
rebar-cache-key: ${{ steps.set-rebar-key.outputs.key }}
27+
28+
steps:
29+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
30+
31+
- uses: erlef/setup-beam@e6d7c94229049569db56a7ad5a540c051a010af9 # v1.20.4
32+
id: setup-beam
33+
with:
34+
version-type: strict
35+
version-file: .tool-versions
36+
37+
- name: Set build cache key
38+
id: set-build-key
39+
run: |
40+
echo "key=\
41+
_build-\
42+
${{ runner.os }}-\
43+
otp-${{ steps.setup-beam.outputs.otp-version }}-\
44+
rebar3-hash-${{ hashFiles('rebar.lock') }}" \
45+
>> "${GITHUB_OUTPUT}"
46+
47+
- name: Set rebar cache key
48+
id: set-rebar-key
49+
run: |
50+
echo "key=\
51+
rebar3-\
52+
${{ runner.os }}-\
53+
otp-${{ steps.setup-beam.outputs.otp-version }}-\
54+
rebar3-${{ steps.setup-beam.outputs.rebar3-version }}-\
55+
config-${{ hashFiles('rebar.config') }}" \
56+
>> "${GITHUB_OUTPUT}"
57+
58+
- name: Cache _build
59+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
60+
with:
61+
path: _build
62+
key: ${{ steps.set-build-key.outputs.key }}
63+
restore-keys: |
64+
_build-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
65+
_build-${{ runner.os }}-
66+
67+
- name: Cache rebar3
68+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
69+
with:
70+
path: ~/.cache/rebar3
71+
key: ${{ steps.set-rebar-key.outputs.key }}
72+
restore-keys: |
73+
rebar3-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
74+
rebar3-${{ runner.os }}-
75+
76+
- name: Compile
77+
run: |
78+
rebar3 as test compile
79+
80+
check:
81+
name: Check
82+
83+
needs: cache
84+
85+
runs-on: ubuntu-24.04
86+
87+
steps:
88+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
89+
90+
- uses: erlef/setup-beam@e6d7c94229049569db56a7ad5a540c051a010af9 # v1.20.4
91+
id: setup-beam
92+
with:
93+
version-type: strict
94+
version-file: .tool-versions
95+
96+
- name: Restore _build cache
97+
id: restore-build-cache
98+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
99+
with:
100+
path: _build
101+
key: ${{ needs.cache.outputs.build-cache-key }}
102+
restore-keys: |
103+
_build-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
104+
_build-${{ runner.os }}-
105+
106+
- name: Restore rebar3 cache
107+
id: restore-rebar3-cache
108+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
109+
with:
110+
path: ~/.cache/rebar3
111+
key: ${{ needs.cache.outputs.rebar-cache-key }}
112+
restore-keys: |
113+
rebar3-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
114+
rebar3-${{ runner.os }}-
115+
116+
- name: Check code
117+
run: |
118+
rebar3 as test check
119+
120+
test:
121+
name: Test
122+
123+
needs: cache
124+
125+
runs-on: ubuntu-24.04
126+
127+
steps:
128+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
129+
130+
- uses: erlef/setup-beam@e6d7c94229049569db56a7ad5a540c051a010af9 # v1.20.4
131+
id: setup-beam
132+
with:
133+
version-type: strict
134+
version-file: .tool-versions
135+
136+
- name: Restore _build cache
137+
id: restore-build-cache
138+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
139+
with:
140+
path: _build
141+
key: ${{ needs.cache.outputs.build-cache-key }}
142+
restore-keys: |
143+
_build-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
144+
_build-${{ runner.os }}-
145+
146+
- name: Restore rebar3 cache
147+
id: restore-rebar3-cache
148+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
149+
with:
150+
path: ~/.cache/rebar3
151+
key: ${{ needs.cache.outputs.rebar-cache-key }}
152+
restore-keys: |
153+
rebar3-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
154+
rebar3-${{ runner.os }}-
155+
156+
- name: Install inotify tools
157+
uses: awalsh128/cache-apt-pkgs-action@2c09a5e66da6c8016428a2172bd76e5e4f14bb17 # v1.5.3
158+
with:
159+
packages: inotify-tools
160+
version: 1.0
161+
162+
- name: Test
163+
run: |
164+
rebar3 as test test
165+
166+
artifacts:
167+
name: Verify artifacts
168+
169+
needs: cache
170+
171+
runs-on: ubuntu-24.04
172+
173+
steps:
174+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
175+
176+
- uses: erlef/setup-beam@e6d7c94229049569db56a7ad5a540c051a010af9 # v1.20.4
177+
id: setup-beam
178+
with:
179+
version-type: strict
180+
version-file: .tool-versions
181+
182+
- name: Restore _build cache
183+
id: restore-build-cache
184+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
185+
with:
186+
path: _build
187+
key: ${{ needs.cache.outputs.build-cache-key }}
188+
restore-keys: |
189+
_build-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
190+
_build-${{ runner.os }}-
191+
192+
- name: Restore rebar3 cache
193+
id: restore-rebar3-cache
194+
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
195+
with:
196+
path: ~/.cache/rebar3
197+
key: ${{ needs.cache.outputs.rebar-cache-key }}
198+
restore-keys: |
199+
rebar3-${{ runner.os }}-otp-${{ steps.setup-beam.outputs.otp-version }}-
200+
rebar3-${{ runner.os }}-
201+
202+
- name: Check if build left artifacts
203+
run: |
204+
rebar3 unlock --all
205+
rebar3 upgrade --all
206+
git diff --exit-code

‎.github/workflows/lint.yml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
name: Lint
3+
4+
"on":
5+
push:
6+
branches:
7+
- main
8+
pull_request:
9+
branches:
10+
- "*"
11+
workflow_dispatch: {}
12+
merge_group:
13+
14+
concurrency:
15+
group: ${{github.workflow}}-${{github.ref}}
16+
cancel-in-progress: true
17+
18+
jobs:
19+
md-lint:
20+
name: Markdown Lint
21+
22+
runs-on: ubuntu-24.04
23+
24+
steps:
25+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
26+
27+
# uses .markdownlint.yml for configuration
28+
- name: markdownlint
29+
uses: DavidAnson/markdownlint-cli2-action@992badcdf24e3b8eb7e87ff9287fe931bcb00c6e # v20.0.0
30+
with:
31+
globs: |
32+
.github/**/*.md
33+
*.md
34+
35+
yaml-lint:
36+
name: YAML Lint
37+
38+
runs-on: ubuntu-24.04
39+
40+
steps:
41+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
42+
43+
- name: yamllint
44+
uses: ibiqlik/action-yamllint@2576378a8e339169678f9939646ee3ee325e845c # v3.1.1
45+
with:
46+
file_or_dir: |
47+
.github/**/*.yml
48+
.*.yml
49+
strict: true
50+
config_file: .yamllint.yml
51+
52+
action-lint:
53+
name: Action Lint
54+
55+
runs-on: ubuntu-24.04
56+
57+
steps:
58+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
59+
60+
- name: actionlint
61+
uses: reviewdog/action-actionlint@95395aac8c053577d0bc67eb7b74936c660c6f66 # v1.67.0
62+
env:
63+
SHELLCHECK_OPTS: -o all

‎.github/workflows/node-js.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
name: Node.js
3+
4+
"on":
5+
push:
6+
branches:
7+
- main
8+
pull_request:
9+
branches:
10+
- "*"
11+
workflow_dispatch: {}
12+
merge_group:
13+
14+
concurrency:
15+
group: ${{github.workflow}}-${{github.ref}}
16+
cancel-in-progress: true
17+
18+
jobs:
19+
check:
20+
name: Check
21+
22+
runs-on: ubuntu-24.04
23+
24+
steps:
25+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
26+
27+
- uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
28+
with:
29+
node-version-file: .tool-versions
30+
cache: "npm"
31+
cache-dependency-path: "package-lock.json"
32+
33+
- name: Install dependencies
34+
run: npm ci
35+
36+
- name: Check code
37+
run: |
38+
npm run format:check
39+
npm run lint:js:check
40+
41+
artifacts:
42+
name: Verify artifacts
43+
44+
runs-on: ubuntu-24.04
45+
46+
steps:
47+
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
48+
49+
- uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
50+
with:
51+
node-version-file: .tool-versions
52+
cache: "npm"
53+
cache-dependency-path: "package-lock.json"
54+
55+
- name: Install dependencies
56+
run: npm ci
57+
58+
- name: Check if build left artifacts
59+
run: |
60+
npm run build
61+
git diff --exit-code

0 commit comments

Comments
 (0)