npm - feat-flag-drupal - Versions diffs - 0.1.0 → 0.1.1 - Mend

feat-flag-drupal 0.1.0 → 0.1.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 (11) hide show

package/README.md +33 -14
package/build/manifest.json +7 -15
package/package.json +3 -1
package/build/main-0.0.4.js +0 -66
package/build/main-0.0.5.js +0 -66
package/build/style-0.0.6.css +0 -1
package/build/style-0.0.7.css +0 -1
/package/build/{main-0.0.6.js → main-0.1.0.js} +0 -0
/package/build/{main-0.0.7.js → main-0.1.1.js} +0 -0
/package/build/{style-0.0.4.css → style-0.1.0.css} +0 -0
/package/build/{style-0.0.5.css → style-0.1.1.css} +0 -0

package/README.md CHANGED Viewed

@@ -4,10 +4,12 @@ This project is a simple versioning system for web assets. It uses Vite to bundl
 ## Development vs. Production
-This project has two main modes:
+This project has multiple build modes:
-*   **Development (`npm run dev`):** Uses a standard `index.html` file for a fast and reliable development experience with Hot Module Replacement (HMR). (For testing only)
-*   **Production Build (`npm run build`):** Generates versioned assets in the `build/` directory.
+*   **Development with HMR (`npm run dev`):** Uses a standard `index.html` file for a fast development experience with Hot Module Replacement.
+*   **Development Build (`npm run dev:build`):** Rebuilds the current version without incrementing - useful for testing changes to the latest version.
+*   **Production Build (`npm run build`):** Rebuilds the current version (same as `dev:build`).
+*   **Create New Version (`npm run build:version`):** Increments the version and creates new versioned assets.
 ## How to Use
@@ -17,29 +19,46 @@ This project has two main modes:
     ```
 2.  **Develop your application:**
-    *   Run `npm run dev`.
+    *   Run `npm run dev` for live development with HMR.
     *   Make changes to your assets in the `src/` directory.
     *   The browser will automatically update as you save files.
-3.  **Prepare for production:**
-    *   You will want to name the twig file to match the desired drupal asset such as `page.html.twig` or any other
+3.  **Test your changes:**
+    *   Run `npm run dev:build` or `npm run build` to rebuild the current version.
+    *   This lets you test the production build without creating a new version.
-4.  **Build a new version:**
-    *   When you are ready to create a new version of your assets, run the following command:
+4.  **Create a new version:**
+    *   When you are ready to release a new version, run:
     ```bash
-    npm run build
+    npm run build:version
     ```
+    *   This will increment the patch version and create new versioned assets.
 ## How the Build Process Works
-The `npm run build` command does the following:
+### Rebuilding Current Version (`npm run build` or `npm run dev:build`)
-1.  **Determines New Version:** It checks for a `build/manifest.json`. If it exists, it increments the `latest_version` number to create a new version. If not, it uses the version from `package.json`. The `package.json` file itself is not modified.
-2.  **Builds Assets:** It runs Vite to build and bundle your assets, compiling your `index.twig` file into a final `index.html`.
-3.  **Outputs Versioned Files:** The output files are placed in the `build/` directory. The filenames will include the new version number, for example:
+These commands rebuild the current version without incrementing:
+1.  **Uses Current Version:** Reads the `latest_version` from `build/manifest.json` (or `package.json` if no manifest exists).
+2.  **Builds Assets:** Runs Vite to build and bundle your assets.
+3.  **Outputs Versioned Files:** Overwrites the existing versioned files in the `build/` directory.
+4.  **Updates Manifest:** Updates the manifest entry for the current version.
+Use this during development when you want to iterate on the current version without creating new version numbers.
+### Creating New Version (`npm run build:version`)
+This command creates a new version:
+1.  **Increments Version:** Reads `latest_version` from `build/manifest.json` and increments the patch number (e.g., 0.0.1 → 0.0.2).
+2.  **Builds Assets:** Runs Vite to build and bundle your assets.
+3.  **Outputs Versioned Files:** Creates new files with the incremented version number:
     *   `main-0.0.2.js`
     *   `style-0.0.2.css`
-4.  **Generates a Manifest:** It creates or updates a `build/manifest.json` file.
+4.  **Updates Manifest:** Adds the new version to `build/manifest.json` and updates `latest_version`.
+Use this when you're ready to release a new version to production.
 ## Feature Flagging and the Manifest

package/build/manifest.json CHANGED Viewed

@@ -1,21 +1,13 @@
 {
   "versions": {
-    "0.0.4": {
-      "main.js": "/main-0.0.4.js",
-      "style.css": "/style-0.0.4.css"
+    "0.1.0": {
+      "main.js": "/main-0.1.0.js",
+      "style.css": "/style-0.1.0.css"
     },
-    "0.0.5": {
-      "main.js": "/main-0.0.5.js",
-      "style.css": "/style-0.0.5.css"
-    },
-    "0.0.6": {
-      "main.js": "/main-0.0.6.js",
-      "style.css": "/style-0.0.6.css"
-    },
-    "0.0.7": {
-      "main.js": "/main-0.0.7.js",
-      "style.css": "/style-0.0.7.css"
+    "0.1.1": {
+      "main.js": "/main-0.1.1.js",
+      "style.css": "/style-0.1.1.css"
     }
   },
-  "latest_version": "0.0.7"
+  "latest_version": "0.1.1"
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "feat-flag-drupal",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "main": "build/main.js",
   "files": [
@@ -9,7 +9,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:build": "node scripts/dev-build.js",
     "build": "node scripts/build.js",
+    "build:version": "node scripts/version.js",
     "preview": "vite preview"
   },
   "devDependencies": {

package/build/main-0.0.4.js DELETED Viewed

@@ -1,66 +0,0 @@
-/* empty css           */document.querySelector("#app").innerHTML=`
-<pre>
-<code>
-# Version Builder
-This project is a simple versioning system for web assets. It uses Vite to bundle your code and a custom script to automatically increment the version number with each build.
-## How to Use
-1.  **Place your code:** Put your HTML, CSS, JavaScript, and other asset files in the root directory of the project. The main entry point for the application is \`index.html\`.
-2.  **Install dependencies:**
-    \`\`\`bash
-    npm install
-    \`\`\`
-3.  **Modify your code:** Make any changes you need to your source files.
-4.  **Build a new version:** When you are ready to create a new version of your assets, run the following command:
-    \`\`\`bash
-    npm run build
-    \`\`\`
-## How it Works
-The \`npm run build\` command does the following:
-1.  **Increments Version:** It automatically increments the \`patch\` number (the last digit) of the version in \`package.json\`. For example, \`0.0.1\` becomes \`0.0.2\`.
-2.  **Builds Assets:** It runs Vite to build and bundle your assets.
-3.  **Outputs Versioned Files:** The output files are placed in the \`build/\` directory. The filenames will include the new version number, for example:
-    *   \`main-0.0.2.js\`
-    *   \`style-0.0.2.css\`
-4.  **Generates a Manifest:** It creates or updates a \`build/manifest.json\` file.
-## Feature Flagging and the Manifest
-To support feature flagging systems, the build process generates a \`manifest.json\` file. This file acts as a single source of truth for your system to look up which assets belong to which version.
-Here is an example of the manifest structure:
-\`\`\`json
-{
-  "versions": {
-    "0.0.1": {
-      "main.js": "/main-0.0.1.js",
-      "style.css": "/style-0.0.1.css"
-    },
-    "0.0.2": {
-      "main.js": "/main-0.0.2.js",
-      "style.css": "/style-0.0.2.css"
-    }
-  },
-  "latest_version": "0.0.2"
-}
-\`\`\`
-Your feature flagging system can consume this file to dynamically load the correct assets for a given version.
-## Publishing as an NPM Package
-This project is set up to be published as an NPM package. The \`files\` property in \`package.json\` is configured to only include the \`build\` directory when you publish the package.
-The \`main\` entry in \`package.json\` points to \`build/main.js\`. After running a build, the actual filename will be versioned (e.g., \`build/main-0.0.2.js\`). You may need to adjust your package consumption logic to account for the versioned filenames.
-</code>
-</pre>
-`;

package/build/main-0.0.5.js DELETED Viewed

@@ -1,66 +0,0 @@
-document.querySelector("#app").innerHTML=`
-<pre>
-<code>
-# Version Builder
-This project is a simple versioning system for web assets. It uses Vite to bundle your code and a custom script to automatically increment the version number with each build.
-## How to Use
-1.  **Place your code:** Put your HTML, CSS, JavaScript, and other asset files in the root directory of the project. The main entry point for the application is \`index.html\`.
-2.  **Install dependencies:**
-    \`\`\`bash
-    npm install
-    \`\`\`
-3.  **Modify your code:** Make any changes you need to your source files.
-4.  **Build a new version:** When you are ready to create a new version of your assets, run the following command:
-    \`\`\`bash
-    npm run build
-    \`\`\`
-## How it Works
-The \`npm run build\` command does the following:
-1.  **Increments Version:** It automatically increments the \`patch\` number (the last digit) of the version in \`package.json\`. For example, \`0.0.1\` becomes \`0.0.2\`.
-2.  **Builds Assets:** It runs Vite to build and bundle your assets.
-3.  **Outputs Versioned Files:** The output files are placed in the \`build/\` directory. The filenames will include the new version number, for example:
-    *   \`main-0.0.2.js\`
-    *   \`style-0.0.2.css\`
-4.  **Generates a Manifest:** It creates or updates a \`build/manifest.json\` file.
-## Feature Flagging and the Manifest
-To support feature flagging systems, the build process generates a \`manifest.json\` file. This file acts as a single source of truth for your system to look up which assets belong to which version.
-Here is an example of the manifest structure:
-\`\`\`json
-{
-  "versions": {
-    "0.0.1": {
-      "main.js": "/main-0.0.1.js",
-      "style.css": "/style-0.0.1.css"
-    },
-    "0.0.2": {
-      "main.js": "/main-0.0.2.js",
-      "style.css": "/style-0.0.2.css"
-    }
-  },
-  "latest_version": "0.0.2"
-}
-\`\`\`
-Your feature flagging system can consume this file to dynamically load the correct assets for a given version.
-## Publishing as an NPM Package
-This project is set up to be published as an NPM package. The \`files\` property in \`package.json\` is configured to only include the \`build\` directory when you publish the package.
-The \`main\` entry in \`package.json\` points to \`build/main.js\`. After running a build, the actual filename will be versioned (e.g., \`build/main-0.0.2.js\`). You may need to adjust your package consumption logic to account for the versioned filenames.
-</code>
-</pre>
-`;

package/build/style-0.0.6.css DELETED Viewed

@@ -1 +0,0 @@

- :root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(max-width:1024px){:root{font-size:16px}}@media(prefers-color-scheme:dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media(max-width:1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media(max-width:1024px){h2{font-size:20px}}p{margin:0}code{font-family:var(--mono);display:flex;flex-wrap:wrap;border-radius:4px;max-width:80vw;color:var(--text-h);overflow-x:auto}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}.counter{font-size:16px;padding:5px 10px;border-radius:5px;color:var(--accent);background:var(--accent-bg);border:2px solid transparent;transition:border-color .3s;margin-bottom:24px}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{inset-inline:0;margin:0 auto}.hero .base{width:170px;position:relative;z-index:0}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;top:34px;height:28px;transform:perspective(2000px) rotate(300deg) rotateX(44deg) rotateY(39deg) scale(1.4)}.hero .vite{z-index:0;top:107px;height:26px;width:auto;transform:perspective(2000px) rotate(300deg) rotateX(40deg) rotateY(39deg) scale(.8)}#app{max-width:100%;margin:0 auto;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}#center{display:flex;flex-direction:column;gap:25px;place-content:center;place-items:center;flex-grow:1}@media(max-width:1024px){#center{padding:32px 20px 24px;gap:18px}}#next-steps{display:flex;border-top:1px solid var(--border);text-align:left}#next-steps>div{flex:1 1 0;padding:32px}@media(max-width:1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{margin-bottom:16px;width:22px;height:22px}@media(max-width:1024px){#next-steps{flex-direction:column;text-align:center}}#docs{border-right:1px solid var(--border)}@media(max-width:1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{list-style:none;padding:0;display:flex;gap:8px;margin:32px 0 0}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);font-size:16px;border-radius:6px;background:var(--social-bg);display:flex;padding:6px 12px;align-items:center;gap:8px;text-decoration:none;transition:box-shadow .3s}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{height:18px;width:18px}@media(max-width:1024px){#next-steps ul{margin-top:20px;flex-wrap:wrap;justify-content:center}#next-steps ul li{flex:1 1 calc(50% - 8px)}#next-steps ul a{width:100%;justify-content:center;box-sizing:border-box}}#spacer{height:88px;border-top:1px solid var(--border)}@media(max-width:1024px){#spacer{height:48px}}.ticks{position:relative;width:100%}.ticks:before,.ticks:after{content:"";position:absolute;top:-4.5px;border:5px solid transparent}.ticks:before{left:0;border-left-color:var(--border)}.ticks:after{right:0;border-right-color:var(--border)}

package/build/style-0.0.7.css DELETED Viewed

@@ -1 +0,0 @@

/package/build/{main-0.0.6.js → main-0.1.0.js} RENAMED Viewed

File without changes

/package/build/{main-0.0.7.js → main-0.1.1.js} RENAMED Viewed

File without changes

/package/build/{style-0.0.4.css → style-0.1.0.css} RENAMED Viewed

File without changes

/package/build/{style-0.0.5.css → style-0.1.1.css} RENAMED Viewed

File without changes