Skip to content

Commit 2722124

Browse files
emmadesilvaemmadesilva
committed
Update HydeFront-v4-plan.md
1 parent 1b72c55 commit 2722124

File tree

1 file changed

+102
-64
lines changed

1 file changed

+102
-64
lines changed

‎HydeFront-v4-plan.md‎

Lines changed: 102 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,69 +11,107 @@ HydeFront will serve two main purposes:
1111

1212
For example, users can include our Tailwind styles granularly using just the `app.css` file from the HydeFront package. This file will be compiled alongside Tailwind. If users prefer customization, they can remove the import and add the specific styles they want.
1313

14-
## Goals
15-
16-
Based on the codebase, here's a detailed plan to refactor HydeFront:
17-
18-
### Phase 1: Setup
19-
- [ ] Create new branch `feature/hydefront-v4`
20-
- [ ] Update HydeFront version to 4.0.0-dev in package.json
21-
- [ ] Create new directory structure in HydeFront:
22-
```
23-
src/
24-
components/
25-
presets/
26-
app.css
14+
## Refactoring Plan
15+
16+
### 1. Restructure HydeFront Package
17+
- Create a new directory structure in HydeFront:
18+
```
19+
hydefront/
20+
├── dist/
21+
│ └── app.css # Pre-compiled styles for CDN
22+
├── components/ # New component-based structure
23+
│ ├── base/ # Base styles
24+
│ ├── docs/ # Documentation styles
25+
│ ├── markdown/ # Markdown styles
26+
│ └── utilities/ # Utility styles
27+
└── package.json
28+
```
29+
30+
### 2. Convert SCSS to Tailwind Components
31+
- Convert existing SCSS styles from `hyde.scss` (reference: `packages/hydefront/hyde.scss`) into Tailwind components
32+
- Create separate files for each component category that can be imported individually
33+
- Example component structure:
34+
```javascript
35+
// components/docs.js
36+
module.exports = {
37+
'.docs-sidebar': {
38+
'@apply ...': {},
39+
}
40+
}
41+
```
42+
43+
### 3. Update Build Process
44+
- Modify the Vite configuration (reference: `vite.config.js`) to handle component-based builds
45+
- Update the build scripts in package.json to:
46+
- Build individual components
47+
- Generate the complete app.css for CDN distribution
48+
- Add new script for component-based builds
49+
50+
### 4. Update Framework Integration
51+
Key files to modify:
52+
53+
```blade
54+
// packages/framework/resources/views/layouts/styles.blade.php
55+
{{-- Prevent Alpine.js flashes --}}
56+
<style>[x-cloak] {display: none!important}</style>
57+
58+
{{-- The compiled Tailwind/App styles --}}
59+
@if(Vite::running())
60+
{{ Vite::assets(['resources/assets/app.css']) }}
61+
@else
62+
@if(config('hyde.load_app_styles_from_cdn', false))
63+
<link rel="stylesheet" href="{{ HydeFront::cdnLink('app.css') }}">
64+
@elseif(Asset::exists('app.css'))
65+
<link rel="stylesheet" href="{{ Asset::get('app.css') }}">
66+
@endif
67+
68+
69+
{{-- Dynamic TailwindCSS Play CDN --}}
70+
@if(config('hyde.use_play_cdn', false))
71+
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
72+
<script>tailwind.config = { {!! HydeFront::injectTailwindConfig() !!} }</script>
73+
<script>console.warn('The HydePHP TailwindCSS Play CDN is enabled. This is for development purposes only and should not be used in production.', 'See https://hydephp.com/docs/1.x/managing-assets');</script>
74+
@endif
75+
@endif
76+
77+
{{-- Add any extra styles to include after the others --}}
78+
@stack('styles')
2779
```
2880

29-
### Phase 2: Component Migration
30-
- [ ] Audit current styles in hyde.scss (reference: `packages/hydefront/hyde.scss`)
31-
- [ ] Create individual Tailwind component files for:
32-
- [ ] Documentation styles
33-
- [ ] Search functionality
34-
- [ ] Sidebar components
35-
- [ ] Markdown typography
36-
- [ ] Code blocks
37-
- [ ] Blockquotes
38-
- [ ] Move Alpine.js utilities to separate component file
39-
40-
### Phase 3: Preset Configuration
41-
- [ ] Create base preset that includes all current functionality
42-
- [ ] Create minimal preset with only core styles
43-
- [ ] Create documentation preset focused on docs-specific styles
44-
- [ ] Update the app.css compilation process to use presets
45-
46-
### Phase 4: Build System Updates
47-
- [ ] Update Vite config to handle new component structure
48-
- [ ] Modify build scripts to:
49-
- [ ] Compile individual components
50-
- [ ] Generate preset bundles
51-
- [ ] Create the main app.css bundle
52-
- [ ] Update the CDN distribution process
53-
54-
### Phase 5: Framework Integration
55-
- [ ] Update Hyde Framework to support new HydeFront structure
56-
- [ ] Modify Asset facade to handle granular component loading
57-
- [ ] Update default Hyde project scaffold
58-
- [ ] Create migration guide for existing projects
59-
60-
### Phase 6: Documentation
61-
- [ ] Document new component system
62-
- [ ] Create examples for common customization scenarios
63-
- [ ] Update HydeFront README
64-
- [ ] Add migration guide to Hyde docs
65-
66-
### Phase 7: Testing & Release
67-
- [ ] Create test suite for components
68-
- [ ] Test backwards compatibility
69-
- [ ] Create release candidate
70-
- [ ] Update CDN infrastructure
71-
- [ ] Release v4.0.0
72-
73-
### Phase 8: Cleanup
74-
- [ ] Remove deprecated files and methods
75-
- [ ] Update all references to old HydeFront structure
76-
- [ ] Archive v3 documentation
77-
- [ ] Update GitHub workflows
78-
79-
This plan maintains backwards compatibility while introducing the new component system. The main app.css will still be available through CDN for existing projects.
81+
82+
### 5. Documentation Updates
83+
- Update the asset management documentation
84+
- Create new documentation for component-based usage
85+
- Update the HydeFront README (reference: `packages/hydefront/README.md`)
86+
87+
### 6. Migration Path
88+
1. Create a new major version branch
89+
2. Keep existing functionality working while adding new component system
90+
3. Provide migration guide for users moving from v1 to v2
91+
4. Update the Hyde starter template to use new component system
92+
93+
### 7. Configuration Updates
94+
- Update the Hyde configuration (reference: `config/hyde.php`) to support component-based imports
95+
- Add new configuration options for granular style inclusion
96+
97+
### 8. Testing Strategy
98+
1. Create tests for individual components
99+
2. Test CDN distribution
100+
3. Test backward compatibility layer
101+
4. Test integration with Hyde framework
102+
103+
### 9. Implementation Phases
104+
1. **Phase 1**: Create new component structure
105+
2. **Phase 2**: Convert existing styles
106+
3. **Phase 3**: Update build system
107+
4. **Phase 4**: Update framework integration
108+
5. **Phase 5**: Documentation and migration guide
109+
6. **Phase 6**: Testing and refinement
110+
111+
### 10. Breaking Changes to Document
112+
- New import syntax for granular components
113+
- Changes to configuration structure
114+
- Updates to asset compilation process
115+
- CDN usage changes
116+
117+
This plan maintains backward compatibility through the CDN while providing a more flexible component-based approach for customization. The changes align with modern frontend practices while keeping Hyde's simplicity.

0 commit comments

Comments
 (0)