builder.io 1.0.2-3 → 1.1.13-0

package/README.md

@@ -1,3 +1,102 @@
+# Builder.io Visual CMS Devtools
+
+Setup and integrate [Builder.io Visual CMS](https://www.builder.io/) during development using the Devtools plugin. Builder Devtools can be integrated with a project's development through either a [Next.js config](#nextjs), [Remix config](#remix), [Vite plugin](#vite), or [Webpack plugin](#webpack).
+
+## Installing Builder Devtools
+
+Builder's Devtools can be [installed and initialized](https://www.npmjs.com/package/@builder.io/create) using:
+
+**npm**
+
 ```
-npx builder.io add 40806bc8
+npm init builder.io@latest
+```
+
+**pnpm**
+
+```
+pnpm create builder.io@latest
+```
+
+This command will update the config file (such as next.config.js, or vite.config.js) and install the `@builder.io/dev-tools` package. Once installed, you can start your app's dev server:
+
+```
+npm run dev
+```
+
+## Manual Installation
+
+Alternatively, you can manually install Builder's Devtools, and update the config files following the steps below.
+
+```
+npm install -D @builder.io/dev-tools
+```
+
+Next step is to add the Devtools plugin to your build tool's config file. For example, if you're using Next.js, see the docs below on how to import and add Devtools to a Next.js app.
+
+## Next.js
+
+A config wrapper function for the [Next.js config](https://nextjs.org/docs/app/api-reference/next-config-js) is provided in order to run Devtools during development. Wrap your existing next config using the `withBuilderDevTools()` function that's created when it is required at the top of the config file.
+
+```js
+// next config file
+const withBuilderDevTools = require("@builder.io/dev-tools/next")({
+  // Builder Devtools Options
+});
+
+module.exports = withBuilderDevTools({
+  // next config
+});
+```
+
+Or configuration as a function:
+
+```js
+module.exports = (phase, defaultConfig) => {
+  return withBuilderDevTools(defaultConfig);
+};
+```
+
+## Remix
+
+A config wrapper function for the [Remix config](https://remix.run/docs/en/main/file-conventions/remix-config) is provided in order to run Devtools during development. Wrap your existing remix config using the `withBuilderDevTools()` function that's created when it is required at the top of the config file.
+
+```js
+// remix config file
+const withBuilderDevTools = require("@builder.io/dev-tools/remix")({
+  // Builder Devtools Options
+});
+
+module.exports = withBuilderDevTools({
+  // remix config
+});
+```
+
+## Vite
+
+The [Vite plugin](https://vitejs.dev/guide/using-plugins.html) for Devtools is meant for frameworks using Vite for its development. Currently, Devtools supports [Qwik](https://qwik.builder.io/) integrated with Vite. Import `builderDevTools` from `@builder.io/dev-tools/vite` and place it as the the first plugin to ensure it runs before others.
+
+```js
+// vite config file
+import { defineConfig } from "vite";
+import { builderDevTools } from "@builder.io/dev-tools/vite";
+
+export default defineConfig(() => {
+  return {
+    plugins: [builderDevTools()],
+  };
+});
+```
+
+## Webpack
+
+The Devtools webpack plugin is for React projects. If your project is using Next.js, please see the [Next.js](#nextjs) docs above on how to add the Devtools plugin to the next config. Below is a general [webpack config](https://webpack.js.org/configuration/plugins/) for a React project.
+
+```js
+// webpack config file
+const { BuilderDevToolsPlugin } = require("@builder.io/dev-tools/webpack");
+
+module.exports = {
+  plugins: [new BuilderDevToolsPlugin()],
+};
 ```

package/angular/index.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var r=(t,e)=>{for(var d in e)l(t,d,{get:e[d],enumerable:!0})},a=(t,e,d,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of c(e))!n.call(t,o)&&o!==d&&l(t,o,{get:()=>e[o],enumerable:!(i=s(e,o))||i.enumerable});return t};var u=t=>a(l({},"__esModule",{value:!0}),t);var b={};r(b,{builderDevTools:()=>p});module.exports=u(b);async function p(){if(typeof document<"u"&&window.location.hostname==="localhost"){let t=document.head.querySelector("script[data-builder-dev-tools]");t||(t=document.createElement("script"),t.setAttribute("src","http://localhost:5273/~builder-dev-tools.js"),t.setAttribute("data-builder-dev-tools",""),t.setAttribute("async",""),document.head.appendChild(t))}}0&&(module.exports={builderDevTools});

package/angular/index.d.ts

@@ -0,0 +1 @@
+export * from "../types/angular";

package/angular/index.mjs

@@ -0,0 +1 @@
+async function e(){if(typeof document<"u"&&window.location.hostname==="localhost"){let t=document.head.querySelector("script[data-builder-dev-tools]");t||(t=document.createElement("script"),t.setAttribute("src","http://localhost:5273/~builder-dev-tools.js"),t.setAttribute("data-builder-dev-tools",""),t.setAttribute("async",""),document.head.appendChild(t))}}export{e as builderDevTools};