{"_id":"@criclabs/my-project-web","_rev":"3-a77c4cc26f653c14817cbcde5d21a8a1","name":"@criclabs/my-project-web","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@criclabs/my-project-web","version":"0.0.0","_id":"@criclabs/my-project-web@0.0.0","maintainers":[{"name":"criclabs","email":"dev@criclabs.co"}],"dist":{"shasum":"f11494dc5c7205edacb083e6742e7bedae920ff4","tarball":"https://registry.npmjs.org/@criclabs/my-project-web/-/my-project-web-0.0.0.tgz","fileCount":3,"integrity":"sha512-wwai+GLcsESi5bxea8fdrTwGAziL23kSVIUfaNrOtWkAyDYXsorjpvODXQpT4zn9mCuCSLO1YM6aYlGnzHVjsg==","signatures":[{"sig":"MEUCIQD1N7WP8P7LUyUmnYznK5Ne27+J7/54LaJfE6QufybHLAIgJOYuv5CL1IkZngjE5nkJs96X94WMw8aQq4f7QM6qyrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3458},"type":"module","gitHead":"a0f964de6d2dd0784b230388051a1b2cb444994d","scripts":{"dev":"vite build --watch --mode development","lint":"prettier --check . && eslint --max-warnings=0 .","build":"vite build --mode production"},"_npmUser":{"name":"criclabs","email":"dev@criclabs.co"},"_npmVersion":"9.5.0","description":"## Template Features","directories":{},"_nodeVersion":"18.15.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.2","eslint":"^8.41.0","prettier":"^2.8.8","typescript":"^5.0.4","eslint-plugin-import":"^2.27.5","eslint-config-prettier":"^8.8.0","@typescript-eslint/parser":"^5.59.8","@typescript-eslint/eslint-plugin":"^5.59.8","eslint-import-resolver-typescript":"^3.5.5"},"_npmOperationalInternal":{"tmp":"tmp/my-project-web_0.0.0_1690951743669_0.8689729493212628","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-08-02T04:49:03.606Z","modified":"2026-08-14T06:53:19.425Z","0.0.0":"2023-08-02T04:49:03.851Z"},"description":"## Template Features","maintainers":[{"email":"dev@criclabs.co","name":"dev-criclabs"},{"email":"team@criclabs.co","name":"teamdisc"}],"readme":"# my-project-web\n\n## Template Features\n\n- Fast Hot Module Replacement 🔥\n- TypeScript Supported 🛠️\n- Optimized Build and Bundling 📦\n- Sourcemap for development environment 🧭\n- Code Linting and Formatting 💅\n- CI/CD with GitHub Action 🤖\n\n## Template TODO Checklist\n\nFollow these instructions to complete the project setup:\n\n- [ ] Update vite configuration, `vite.config.js`, to match the project\n  - [ ] Replace `MyProjectWeb` in the `build.lib.name` option with the project name.\n  - [ ] Replace `MyProjectWeb` in the `build.rollupOptions.output.name` option with the name that will be used as component prefix.\n- [ ] Replace `MyProjectWeb` in the `main.ts` with the project name.\n- [ ] Update project name by replacing all the word `my-project-web` in following files with the project name in Kebab case.\n  - [ ] README.md\n  - [ ] package.json\n  - [ ] vite.config.js\n- [ ] Configure GitHub repository setting\n  - [ ] Setup branch protection.\n  - [ ] Create npm classic access token and add to `NPM_ACCESS_TOKEN` in GitHub Actions secret.\n- [ ] Update README.md content\n  - [ ] Remove template related content.\n  - [ ] Update `MyProjectWeb` in the code snippet to match the value of option `build.rollupOptions.output.name` in vite configuration, `vite.config.js`.\n\n## Usage\n\n1. Include following script tag to page head in the site setting or specific page.\n2. Update `version` of the module.\n\n```html\n<script\n  defer\n  src=\"https://cdn.jsdelivr.net/npm/@criclabs/my-project-web@{version}/dist/my-project-web.js\"\n></script>\n```\n\n3. On the Webflow page, initialize the component in the `head` section.\n\n```html\n<script>\n  window.addEventListener(\"DOMContentLoaded\", () => {\n    const buttonElement = document.querySelector(\"#unique-button\");\n\n    if (buttonElement) {\n      new MyProjectWeb.Button(buttonElement);\n    }\n  });\n</script>\n```\n\n## Local Development\n\nThe following instructions for setting up a local development environment allow you to develop the web component locally and see the changes you make reflected on the Webflow site.\n\n### Prerequisites\n\n1. Install [ngrok](https://ngrok.com/download) on your local machine.\n2. Sign in to ngrok and configure your authentication token on your machine.\n\n```sh\nngrok config add-authtoken YOUR-AUTH-TOKRN\n```\n\n### Setup Local Development\n\n1. Run the ngrok's file server with following command:\n\n```sh\nngrok http file://$PWD\n```\n\n2. Get the public URL from the ngrok console and visit the URL from your browser then click on \"Visit Site\".\n3. On the WebFlow's custom code setting, comment out the script tag of the original module and add the module you are working on.\n\n```html\n<!-- <script defer src=\"ORIGINAL_MODULE_URL\"></script> -->\n<script defer src=\"NGROK_PUBLIC_URL/dist/my-project-web.js\"></script>\n```\n","readmeFilename":"README.md"}