buner 0.0.2 → 1.0.1

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 (177) hide show
  1. package/.env +15 -0
  2. package/.env.development +6 -0
  3. package/.env.eshn +5 -0
  4. package/README.md +141 -5
  5. package/bin/buner.js +566 -0
  6. package/cli/README.md +1 -0
  7. package/cli/buner.ts +234 -0
  8. package/cli/cli.ts +125 -0
  9. package/cli/create-app.ts +59 -0
  10. package/cli/helpers/copy.ts +62 -0
  11. package/cli/helpers/format-files.ts +189 -0
  12. package/cli/helpers/git.ts +77 -0
  13. package/cli/helpers/install.ts +26 -0
  14. package/cli/helpers/is-folder-empty.ts +40 -0
  15. package/cli/helpers/is-writeable.ts +14 -0
  16. package/cli/helpers/make-dir.ts +7 -0
  17. package/cli/helpers/validate-pkg.ts +17 -0
  18. package/cli/install-template.ts +77 -0
  19. package/eslint.config.mjs +187 -0
  20. package/index.html +44 -0
  21. package/integration.ts +179 -0
  22. package/migrate-scss.ts +42 -0
  23. package/package.json +135 -7
  24. package/prerender.ts +229 -0
  25. package/public/.nojekyll +1 -0
  26. package/public/400.html +1 -0
  27. package/public/401.html +21 -0
  28. package/public/403.html +252 -0
  29. package/public/404.css +51 -0
  30. package/public/404.html +29 -0
  31. package/public/__images__/awww.jpeg +0 -0
  32. package/public/__images__/bat-body.png +0 -0
  33. package/public/__images__/bat-wing.png +0 -0
  34. package/public/__images__/haunted-house-background.png +0 -0
  35. package/public/__images__/haunted-house-foreground.png +0 -0
  36. package/public/assets/fonts/crimson-text/CrimsonText-Bold.ttf +0 -0
  37. package/public/assets/fonts/crimson-text/CrimsonText-BoldItalic.ttf +0 -0
  38. package/public/assets/fonts/crimson-text/CrimsonText-Italic.ttf +0 -0
  39. package/public/assets/fonts/crimson-text/CrimsonText-Regular.ttf +0 -0
  40. package/public/assets/fonts/crimson-text/CrimsonText-SemiBold.ttf +0 -0
  41. package/public/assets/fonts/crimson-text/CrimsonText-SemiBoldItalic.ttf +0 -0
  42. package/public/assets/fonts/crimson-text/CrimsonText.woff2 +0 -0
  43. package/public/assets/fonts/crimson-text/OFL.txt +93 -0
  44. package/public/assets/fonts/work-sans/OFL.txt +93 -0
  45. package/public/assets/fonts/work-sans/README.txt +81 -0
  46. package/public/assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf +0 -0
  47. package/public/assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf +0 -0
  48. package/public/assets/fonts/work-sans/WorkSans.woff2 +0 -0
  49. package/public/assets/fonts/work-sans/static/WorkSans-Black.ttf +0 -0
  50. package/public/assets/fonts/work-sans/static/WorkSans-BlackItalic.ttf +0 -0
  51. package/public/assets/fonts/work-sans/static/WorkSans-Bold.ttf +0 -0
  52. package/public/assets/fonts/work-sans/static/WorkSans-BoldItalic.ttf +0 -0
  53. package/public/assets/fonts/work-sans/static/WorkSans-ExtraBold.ttf +0 -0
  54. package/public/assets/fonts/work-sans/static/WorkSans-ExtraBoldItalic.ttf +0 -0
  55. package/public/assets/fonts/work-sans/static/WorkSans-ExtraLight.ttf +0 -0
  56. package/public/assets/fonts/work-sans/static/WorkSans-ExtraLightItalic.ttf +0 -0
  57. package/public/assets/fonts/work-sans/static/WorkSans-Italic.ttf +0 -0
  58. package/public/assets/fonts/work-sans/static/WorkSans-Light.ttf +0 -0
  59. package/public/assets/fonts/work-sans/static/WorkSans-LightItalic.ttf +0 -0
  60. package/public/assets/fonts/work-sans/static/WorkSans-Medium.ttf +0 -0
  61. package/public/assets/fonts/work-sans/static/WorkSans-MediumItalic.ttf +0 -0
  62. package/public/assets/fonts/work-sans/static/WorkSans-Regular.ttf +0 -0
  63. package/public/assets/fonts/work-sans/static/WorkSans-SemiBold.ttf +0 -0
  64. package/public/assets/fonts/work-sans/static/WorkSans-SemiBoldItalic.ttf +0 -0
  65. package/public/assets/fonts/work-sans/static/WorkSans-Thin.ttf +0 -0
  66. package/public/assets/fonts/work-sans/static/WorkSans-ThinItalic.ttf +0 -0
  67. package/public/assets/images/icons.svg +67 -0
  68. package/public/assets/images/logo.svg +14 -0
  69. package/public/assets/images/root.svg +49 -0
  70. package/public/assets/vendors/axios@0.24.0/axios.js +2275 -0
  71. package/public/assets/vendors/axios@0.24.0/axios.map +1 -0
  72. package/public/assets/vendors/axios@0.24.0/axios.min.js +2 -0
  73. package/public/assets/vendors/axios@0.24.0/axios.min.map +1 -0
  74. package/public/favicon.ico +0 -0
  75. package/public/favicon.svg +3 -0
  76. package/public/icon-128.png +0 -0
  77. package/public/icon-16.png +0 -0
  78. package/public/icon-192.png +0 -0
  79. package/public/icon-48.png +0 -0
  80. package/public/icon-512.png +0 -0
  81. package/public/json/avatar.json +42 -0
  82. package/public/manifest.webmanifest +29 -0
  83. package/public/mockServiceWorker.js +349 -0
  84. package/public/pl-states.svg +4 -0
  85. package/public/samples/01.svg +1 -0
  86. package/public/samples/Airbnb.svg +3 -0
  87. package/public/samples/Facebook.svg +3 -0
  88. package/public/samples/Google.svg +8 -0
  89. package/public/samples/Microsoft.svg +7 -0
  90. package/public/samples/Spotify.svg +3 -0
  91. package/public/samples/alexandra-stolz.svg +35 -0
  92. package/public/samples/browserconfig.xml +9 -0
  93. package/public/samples/cliff-curtis.jpg +0 -0
  94. package/public/samples/emilia-clarke.jpg +0 -0
  95. package/public/samples/favicon.ico +0 -0
  96. package/public/samples/icons/android-chrome-192x192.png +0 -0
  97. package/public/samples/icons/apple-touch-icon.png +0 -0
  98. package/public/samples/icons/favicon-144x144.png +0 -0
  99. package/public/samples/icons/favicon-150x150.png +0 -0
  100. package/public/samples/icons/favicon-16x16.png +0 -0
  101. package/public/samples/icons/favicon-32x32.png +0 -0
  102. package/public/samples/icons/favicon-48x48.png +0 -0
  103. package/public/samples/icons/favicon-70x70.png +0 -0
  104. package/public/samples/icons/favicon.ico +0 -0
  105. package/public/samples/image-1.svg +166 -0
  106. package/public/samples/image-2.svg +110 -0
  107. package/public/samples/image-3.svg +113 -0
  108. package/public/samples/janet-bray.svg +36 -0
  109. package/public/samples/kate-winslet.jpg +0 -0
  110. package/public/samples/manifest.json +19 -0
  111. package/public/samples/michelle-yeoh.jpg +0 -0
  112. package/public/samples/peg-legge.svg +37 -0
  113. package/public/samples/richard-guerra.svg +42 -0
  114. package/public/samples/rose-leslie.jpg +0 -0
  115. package/public/samples/sample-1.svg +365 -0
  116. package/public/samples/sample-2.svg +129 -0
  117. package/public/samples/sample-3.svg +93 -0
  118. package/public/samples/sample-4.svg +168 -0
  119. package/public/samples/sample-5.svg +155 -0
  120. package/public/samples/sample-6.svg +445 -0
  121. package/public/samples/sample-7.svg +404 -0
  122. package/public/samples/sample-8.png +0 -0
  123. package/public/staticwebapp.config.json +138 -0
  124. package/scripts.ts +56 -0
  125. package/server.ts +29 -0
  126. package/states.ts +63 -0
  127. package/styles.ts +232 -0
  128. package/tsconfig.json +71 -25
  129. package/types.d.ts +54 -0
  130. package/vite.config.ts +3 -0
  131. package/xpack/alias.ts +21 -0
  132. package/xpack/config.ts +59 -0
  133. package/xpack/create-server.ts +68 -0
  134. package/xpack/create-vite-dev-server.ts +33 -0
  135. package/xpack/deploy/deploy-inte.ts +3 -0
  136. package/xpack/filename.ts +43 -0
  137. package/xpack/hooks/build-start.ts +17 -0
  138. package/xpack/hooks/close-bundle.ts +19 -0
  139. package/xpack/hooks/handle-hot-update.ts +22 -0
  140. package/xpack/hooks/options.ts +55 -0
  141. package/xpack/hooks/resolve-dynamic-import.ts +18 -0
  142. package/xpack/hooks/transform-index-html.ts +18 -0
  143. package/xpack/hooks/transform.ts +72 -0
  144. package/xpack/hooks/write-bundle.ts +16 -0
  145. package/xpack/manual-chunk.ts +56 -0
  146. package/xpack/paths.ts +30 -0
  147. package/xpack/react-loader-init.tsx +4 -0
  148. package/xpack/react-loader.tsx +54 -0
  149. package/xpack/renderer.ts +141 -0
  150. package/xpack/root/active-item-options.tsx +98 -0
  151. package/xpack/root/frame-controls.tsx +139 -0
  152. package/xpack/root/index.tsx +107 -0
  153. package/xpack/root/rendered-item.tsx +25 -0
  154. package/xpack/root/root-context.ts +22 -0
  155. package/xpack/root/root-nav.tsx +162 -0
  156. package/xpack/root/state-animation-html.tsx +18 -0
  157. package/xpack/root/template.tsx +23 -0
  158. package/xpack/root/use-click-outside.ts +37 -0
  159. package/xpack/scripts/color-mode.entry.ts +28 -0
  160. package/xpack/scripts/mock-api.entry.ts +11 -0
  161. package/xpack/scripts/pl-states.entry.ts +321 -0
  162. package/xpack/scripts/root.entry.ts +135 -0
  163. package/xpack/scripts/theme-critical.entry.ts +20 -0
  164. package/xpack/states.schema.json +61 -0
  165. package/xpack/styles/_border.scss +22 -0
  166. package/xpack/styles/_breakpoint.scss +117 -0
  167. package/xpack/styles/_form.scss +23 -0
  168. package/xpack/styles/_px2rem.scss +5 -0
  169. package/xpack/styles/_reset.scss +134 -0
  170. package/xpack/styles/_state-toggle.scss +121 -0
  171. package/xpack/styles/_theme.scss +68 -0
  172. package/xpack/styles/_top-panel.scss +87 -0
  173. package/xpack/styles/_xpack-root.scss +322 -0
  174. package/xpack/styles/pl-states.scss +308 -0
  175. package/xpack/styles/root.scss +129 -0
  176. package/.github/workflows/deploy.yaml +0 -32
  177. package/index.ts +0 -1
package/.env ADDED
@@ -0,0 +1,15 @@
1
+ # Documentation: https://tuyen.blog/optimizely-cms/frontend/integration/
2
+ # This is the default values for production and all other environments.
3
+
4
+ VITE_BASE_URL=/
5
+ VITE_PORT=15889
6
+ # use '.html' or '' (empty)
7
+ VITE_PATH_EXTENSION='.html'
8
+
9
+ VITE_TITLE_SUFFIX='Precise Alloy UI'
10
+
11
+ VITE_APP_API_AVATAR_URL=/api/avatar
12
+ VITE_APP_API_CONTACT_FORM_URL=/api/contact-form
13
+
14
+ VITE_INTE_ASSET_DIR=../PreciseAlloy.Web/wwwroot/assets
15
+ VITE_INTE_PATTERN_DIR=../PreciseAlloy.Patterns
@@ -0,0 +1,6 @@
1
+ # Documentation: https://tuyen.blog/optimizely-cms/frontend/development/
2
+
3
+ NODE_ENV=development
4
+ VITE_BASE_URL=/
5
+ # use '.html' or '' (empty)
6
+ VITE_PATH_EXTENSION='.html'
package/.env.eshn ADDED
@@ -0,0 +1,5 @@
1
+ # Documentation: https://tuyen.blog/optimizely-cms/frontend/deployment/
2
+
3
+ VITE_BASE_URL=/
4
+ # use '.html' or '' (empty)
5
+ VITE_PATH_EXTENSION='.html'
package/README.md CHANGED
@@ -1,15 +1,151 @@
1
1
  # buner
2
2
 
3
- To install dependencies:
3
+ Frontend build toolkit for **Vite + React SSR** projects — SCSS pipeline, SSR dev server, prerender, and backend integration.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install buner
9
+ ```
10
+
11
+ Or install globally for the CLI:
12
+
13
+ ```bash
14
+ npm install -g buner
15
+ ```
16
+
17
+ ## Quick Start
18
+
19
+ ### Scaffold a new project
20
+
21
+ ```bash
22
+ npx buner create my-app
23
+ cd my-app
24
+ npm install
25
+ ```
26
+
27
+ ### Development
28
+
29
+ ```bash
30
+ npx buner dev
31
+ ```
32
+
33
+ Starts all watchers concurrently: SCSS, states, Vite HMR, and the Express SSR dev server.
34
+
35
+ ### Production Build
36
+
37
+ ```bash
38
+ npx buner build
39
+ ```
40
+
41
+ Produces `dist/static/` (client) and `dist/server/` (SSR) output.
42
+
43
+ ### Static Site Generation
44
+
45
+ ```bash
46
+ npx buner generate
47
+ ```
48
+
49
+ Runs: states → styles → build → prerender (with content hashes).
50
+
51
+ ### Build for Deployment (eshn mode)
52
+
53
+ ```bash
54
+ npx buner eshn
55
+ ```
56
+
57
+ Same as `generate` but with `--mode eshn`.
58
+
59
+ ### Backend Integration
60
+
61
+ ```bash
62
+ npx buner inte
63
+ ```
64
+
65
+ Runs: styles → build → prerender → copies assets to the directory configured in `VITE_INTE_ASSET_DIR` (set in `.env`).
66
+
67
+ ## CLI Commands
68
+
69
+ | Command | Description |
70
+ | -------------------- | ---------------------------------------------------- |
71
+ | `buner create [dir]` | Scaffold a new frontend project |
72
+ | `buner dev` | Watch mode (styles + states + Vite HMR + SSR server) |
73
+ | `buner serve` | Start the SSR dev server only |
74
+ | `buner build` | Vite static + SSR build |
75
+ | `buner generate` | Full static site generation |
76
+ | `buner eshn` | Generate with `--mode eshn` |
77
+ | `buner inte` | Build and integrate with backend |
78
+ | `buner styles` | Compile SCSS only |
79
+ | `buner prerender` | Pre-render HTML files only |
80
+
81
+ ## Configuration
82
+
83
+ Configuration is done via `.env` files in your project root:
84
+
85
+ | Variable | Default | Description |
86
+ | ----------------------- | --------- | ------------------------------------------------------------------- |
87
+ | `VITE_BASE_URL` | `/` | Base path for all assets |
88
+ | `VITE_PORT` | `5000` | Dev server port |
89
+ | `VITE_PATH_EXTENSION` | `'.html'` | File extension for routes (`.html` or empty) |
90
+ | `VITE_TITLE_SUFFIX` | — | Browser tab title suffix |
91
+ | `VITE_INTE_ASSET_DIR` | — | Integration output path for assets (e.g. `../MyApp/wwwroot/assets`) |
92
+ | `VITE_INTE_PATTERN_DIR` | — | Integration output path for HTML patterns |
93
+
94
+ Override per environment with `.env.development`, `.env.eshn`, etc.
95
+
96
+ ## Peer Dependencies
97
+
98
+ Your project must install these:
4
99
 
5
100
  ```bash
6
- bun install
101
+ npm install react react-dom react-router-dom
102
+ ```
103
+
104
+ ## Project Structure
105
+
106
+ A buner project looks like this:
107
+
108
+ ```
109
+ my-app/
110
+ ├── .env # Environment variables
111
+ ├── index.html # HTML template
112
+ ├── vite.config.ts # Vite config (imports buner's xpack/config)
113
+ ├── tsconfig.json
114
+ ├── public/
115
+ │ └── assets/ # Static assets (fonts, images, vendors)
116
+ └── src/
117
+ ├── app.tsx # Route definitions → components
118
+ ├── entry-client.tsx # Client-side hydration
119
+ ├── entry-server.tsx # SSR render function
120
+ ├── routes.ts # Route registry
121
+ ├── react-loader.tsx # Lazy component loader
122
+ ├── pages/ # Your page components
123
+ ├── atoms/ # Atomic components
124
+ ├── molecules/ # Molecular components
125
+ ├── organisms/ # Organism components
126
+ └── assets/
127
+ ├── styles/ # SCSS (abstracts, mixins, base)
128
+ └── scripts/ # Standalone JS/TS assets
7
129
  ```
8
130
 
9
- To run:
131
+ ## SCSS Pipeline
132
+
133
+ buner compiles SCSS with **sass** + **postcss** + **autoprefixer** + **cssnano**.
134
+
135
+ SCSS files are automatically discovered from:
136
+ - `src/assets/styles/style-base.scss` — base styles (includes atoms + molecules)
137
+ - `src/organisms/**/*.scss` — prefixed with `b-`
138
+ - `src/templates/**/*.scss` — prefixed with `p-`
139
+ - `xpack/styles/**/*.scss` — framework UI styles
140
+
141
+ ## SCSS Migration
142
+
143
+ To replace deprecated `@import` statements with `@use` and `@forward`:
10
144
 
11
145
  ```bash
12
- bun run index.ts
146
+ bun migrate-scss.ts
13
147
  ```
14
148
 
15
- This project was created using `bun init` in bun v1.2.19. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
149
+ ## License
150
+
151
+ MIT