@fynd-design-engineering/fynd-one-v2 1.0.1

package/README.md

@@ -0,0 +1,355 @@
+# CDN-Starter 🚀
+
+A modern, production-ready starter template for building custom JavaScript/TypeScript code for Webflow projects. Streamline your development workflow with TypeScript, automated builds, live reloading, and comprehensive testing.
+
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+[![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org/)
+[![PNPM](https://img.shields.io/badge/PNPM-10%2B-orange.svg)](https://pnpm.io/)
+
+## ✨ Features
+
+- **🔧 Modern TypeScript Setup** - Full TypeScript support with strict type checking
+- **⚡ Lightning Fast Builds** - Powered by esbuild for instant compilation
+- **🔄 Live Development** - Hot reloading for instant feedback during development
+- **📦 Optimized Production Builds** - Minified, tree-shaken, and ES2020-compatible output
+- **🧪 Automated Testing** - End-to-end testing with Playwright
+- **📏 Code Quality** - ESLint, Prettier, and TypeScript integration
+- **🎯 Path Aliases** - Clean imports with custom path mappings
+- **📋 Changesets** - Automated versioning and changelog generation
+- **🌐 Webflow Ready** - Optimized for Webflow custom code integration
+
+## 🏁 Quick Start
+
+### Prerequisites
+
+Ensure you have the following installed:
+
+- **Node.js** (v18.0.0 or higher) - [Download here](https://nodejs.org/)
+- **pnpm** (v10.0.0 or higher) - [Install guide](https://pnpm.io/installation)
+
+### Installation
+
+1. **Create a new repository from this template**
+
+   [🔗 Use this template](https://github.com/Fynd-Design-Engineering/CDN-Starter)
+
+   > **Note:** You must be authenticated with a Fynd Design Engineering GitHub account
+
+2. **Clone and install dependencies**
+   After creating a project with above template install all dependencies using pnpm
+
+   ```bash
+   pnpm install
+   ```
+
+3. **Start developing**
+
+   ```bash
+   pnpm dev
+   ```
+
+   Open [http://localhost:3000](http://localhost:3000) to see your project in action!
+
+## 🛠️ Development Workflow
+
+### Development Mode
+
+Launch the development server with live reloading:
+
+```bash
+pnpm dev
+```
+
+**What happens:**
+
+- 📦 Bundles TypeScript files in real-time
+- 🌐 Serves files at `http://localhost:3000`
+- 🔄 Automatically reloads on file changes
+- 🗺️ Generates source maps for debugging
+- 📊 Displays a helpful table of served files with import suggestions
+
+### Production Build
+
+Create an optimized build for deployment:
+
+```bash
+pnpm build
+```
+
+**Build optimizations:**
+
+- 🗜️ Code minification and compression
+- 🌳 Tree shaking to remove unused code
+- 🎯 ES2020 target for broad browser compatibility
+- 📁 Clean output in the `dist/` directory
+
+## 🧪 Testing & Quality Assurance
+
+### Running Tests
+
+Execute end-to-end tests with Playwright:
+
+```bash
+# Run tests in headless mode
+pnpm test
+
+# Interactive test runner with UI
+pnpm test:ui
+```
+
+### Code Linting
+
+Maintain code quality with ESLint:
+
+```bash
+# Check for issues
+pnpm lint
+
+# Auto-fix common problems
+pnpm lint:fix
+```
+
+### Code Formatting
+
+Keep code consistent with Prettier:
+
+```bash
+pnpm format
+```
+
+### Type Checking
+
+Verify TypeScript types:
+
+```bash
+pnpm check
+```
+
+## 📦 Release Management
+
+This project uses [Changesets](https://github.com/changesets/changesets) for professional version management.
+
+### Creating a Release
+
+1. **Work on your feature branch** (never commit directly to `main`)
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make your changes and build**
+
+   ```bash
+   pnpm build
+   ```
+
+3. **Create a changeset**
+
+   ```bash
+   pnpm changeset
+   ```
+
+   Follow the prompts to:
+
+   - Select which packages changed
+   - Choose the semantic version bump (patch/minor/major)
+   - Write a clear summary of changes
+
+4. **Commit your changes**
+
+   ```bash
+   git add .
+   git commit -m "feat: add your feature description"
+   ```
+
+5. **Publish the release**
+   ```bash
+   pnpm release
+   ```
+
+### Dependency Management
+
+Keep dependencies up-to-date:
+
+```bash
+pnpm update
+```
+
+## 📁 Project Architecture
+
+```
+cdn-starter/
+├── 📂 src/
+│   ├── 📄 index.ts          # Main entry point
+│   └── 📂 utils/            # Utility functions
+│       └── 📄 *.ts          # Your utility modules
+├── 📂 dist/                 # 🏗️ Build output (auto-generated)
+├── 📂 tests/                # 🧪 Playwright test files
+│   └── 📄 example.spec.ts   # Example test file
+├── 📂 bin/                  # 🔧 Build tools
+│   ├── 📄 build.js          # esbuild configuration
+│   └── 📄 live-reload.js    # Development hot reload script
+├── 📄 package.json          # Project configuration
+├── 📄 tsconfig.json         # TypeScript settings
+├── 📄 eslint.config.js      # ESLint rules
+├── 📄 playwright.config.ts  # Test configuration
+└── 📄 README.md            # This file
+```
+
+## 🛤️ Advanced Configuration
+
+### Multiple Entry Points
+
+Build multiple files by updating `bin/build.js`:
+
+```javascript
+const ENTRY_POINTS = [
+  "src/home/index.ts", // → dist/home/index.js
+  "src/contact/form.ts", // → dist/contact/form.js
+  "src/shared/utils.ts", // → dist/shared/utils.js
+];
+```
+
+### Path Aliases
+
+Use clean imports with pre-configured aliases:
+
+```typescript
+// ❌ Avoid relative paths
+import { helper } from "../../utils/helper";
+
+// ✅ Use clean path aliases
+import { helper } from "$utils/helper";
+```
+
+**Available aliases:**
+
+- `$utils/*` → `src/utils/*`
+
+Add more in `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "$utils/*": ["src/utils/*"],
+      "$components/*": ["src/components/*"],
+      "$types/*": ["src/types/*"]
+    }
+  }
+}
+```
+
+## 🌐 Webflow Integration
+
+### Development Integration
+
+For testing in Webflow during development:
+
+1. Start the dev server: `pnpm dev`
+2. Use the development URLs in Webflow:
+   ```html
+   <script defer src="http://localhost:3000/index.js"></script>
+   ```
+
+### Production Deployment
+
+1. **Build your project**
+
+   ```bash
+   pnpm build
+   ```
+
+2. **Upload to your CDN**
+   Upload files from the `dist/` directory to your preferred CDN (Cloudflare, AWS CloudFront, etc.)
+
+3. **Include in Webflow**
+   Run this to get the generated cdn links with the latest version available
+   ```bash
+   pnpm cdn
+   ```
+
+### Best Practices for Webflow
+
+- **Use `defer`** for non-critical scripts
+- **Minimize HTTP requests** by bundling related functionality
+- **Test thoroughly** across different Webflow templates
+- **Use semantic versioning** for cache busting
+
+## 🤝 Contributing
+
+We welcome contributions! Please follow these guidelines:
+
+1. **Fork the repository**
+2. **Create a feature branch**
+   ```bash
+   git checkout -b feature/amazing-feature
+   ```
+3. **Make your changes** following our code standards
+4. **Run quality checks**
+   ```bash
+   pnpm test && pnpm lint && pnpm check
+   ```
+5. **Add a changeset**
+   ```bash
+   pnpm changeset
+   ```
+6. **Commit with conventional commits**
+   ```bash
+   git commit -m "feat: add amazing feature"
+   ```
+7. **Push and create a Pull Request**
+
+### Commit Convention
+
+We follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+- `feat:` New features
+- `fix:` Bug fixes
+- `docs:` Documentation changes
+- `style:` Code style changes
+- `refactor:` Code refactoring
+- `test:` Test additions or changes
+- `chore:` Maintenance tasks
+
+## 📊 Performance Tips
+
+- **Bundle analysis**: Use esbuild's metafile option for bundle analysis
+- **Code splitting**: Consider splitting large applications into multiple entry points
+- **Tree shaking**: Write ES modules to enable automatic dead code elimination
+- **Compression**: Enable gzip/brotli compression on your CDN
+
+## 🐛 Troubleshooting
+
+### Common Issues
+
+**Build failures:**
+
+```bash
+# Clear node_modules and reinstall
+rm -rf node_modules pnpm-lock.yaml
+pnpm install
+```
+
+**TypeScript errors:**
+
+```bash
+# Check your tsconfig.json configuration
+pnpm check
+```
+
+**Live reload not working:**
+
+- Ensure port 3000 is available
+- Check browser console for WebSocket connection errors
+- Verify firewall settings
+
+## 📄 License
+
+This project is licensed under the [ISC License](https://opensource.org/licenses/ISC).
+
+---
+
+<div align="center">
+  <sub>Built with ❤️ by the cool webflow guys at Fynd</sub>
+</div>

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+(() => {
+  // bin/live-reload.js
+  new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
+    "change",
+    () => location.reload()
+  );
+
+  // src/utils/sample.ts
+  function logMessage(message) {
+    console.log("Logged message:", message);
+  }
+
+  // src/index.ts
+  logMessage("use this for webflow projects by fynd webflow team");
+})();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../bin/live-reload.js", "../src/utils/sample.ts", "../src/index.ts"],
+  "sourcesContent": ["new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n  location.reload()\n);\n", "export function logMessage(message: string): void {\n  console.log(\"Logged message:\", message);\n}\n", "import { logMessage } from \"$utils/sample\";\nlogMessage(\"use this for webflow projects by fynd webflow team\");\n"],
+  "mappings": ";;;AAAA,MAAI,YAAY,GAAG,uBAAY,UAAU,EAAE;AAAA,IAAiB;AAAA,IAAU,MACpE,SAAS,OAAO;AAAA,EAClB;;;ACFO,WAAS,WAAW,SAAuB;AAChD,YAAQ,IAAI,mBAAmB,OAAO;AAAA,EACxC;;;ACDA,aAAW,oDAAoD;",
+  "names": []
+}

package/dist/sample/test.js

@@ -0,0 +1,12 @@
+"use strict";
+(() => {
+  // bin/live-reload.js
+  new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
+    "change",
+    () => location.reload()
+  );
+
+  // src/sample/test.ts
+  console.log("%csrc/cdn/test.ts:");
+})();
+//# sourceMappingURL=test.js.map

package/dist/sample/test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../bin/live-reload.js", "../../src/sample/test.ts"],
+  "sourcesContent": ["new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n  location.reload()\n);\n", "console.log(\"%csrc/cdn/test.ts:\");\n"],
+  "mappings": ";;;AAAA,MAAI,YAAY,GAAG,uBAAY,UAAU,EAAE;AAAA,IAAiB;AAAA,IAAU,MACpE,SAAS,OAAO;AAAA,EAClB;;;ACFA,UAAQ,IAAI,oBAAoB;",
+  "names": []
+}

package/dist/styles/global.css

@@ -0,0 +1,5 @@
+/* src/styles/global.css */
+[fynd-webflow] {
+  color: red;
+}
+/*# sourceMappingURL=global.css.map */

package/dist/styles/global.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles/global.css"],
+  "sourcesContent": ["[fynd-webflow]{\n    color:red\n}"],
+  "mappings": ";AAAA,CAAC;AACG,SAAM;AACV;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@fynd-design-engineering/fynd-one-v2",
+  "version": "1.0.1",
+  "description": "Updated CDN for fynd.com",
+  "homepage": "https://github.com/Fynd-Design-Engineering/Fynd-Utils/blob/main/README.md",
+  "license": "ISC",
+  "keywords": [],
+  "author": {
+    "name": "Fynd Design Engineering",
+    "url": "https://www.fynd.design/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Fynd-Design-Engineering/Fynd-Utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Fynd-Design-Engineering/Fynd-Utils/issues"
+  },
+  "type": "module",
+  "main": "dist/index.ts",
+  "module": "dist/index.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.4",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.25.5"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ./bin/build.js",
+    "build": "cross-env NODE_ENV=production node ./bin/build.js",
+    "cdn": "node ./bin/cdn.js",
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix",
+    "check": "tsc --noEmit",
+    "format": "prettier --write ./src",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "release": "changeset publish",
+    "update": "pnpm update -i -L -r"
+  }
+}