@pinegrow/nuxt-module 3.0.0-beta.13 → 3.0.0-beta.130

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,67 @@
-# @pinegrow/nuxt-module
+<!-- [![@pinegrow/nuxt-module](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
 
-## Nuxt module for Pinegrow
+# Pinegrow Nuxt Module
 
-http://www.pinegrow.com
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+
+[Nuxt](https://nuxt.com/) module for [Pinegrow](https://pinegrow.com) ⚡️
+
+Pinegrow Nuxt Module enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).
+
+-   [📖 &nbsp;Documentation](https://pinegrow.com/vue-designer)
+
+## Features
+
+-   🎨&nbsp; Visually live-design your Vite-powered Nuxt apps
+-   ⚙️&nbsp; Smartly integrates into your Nuxt workflow in dev-mode only
+-   ✨&nbsp; No lock-in, Pinegrow is an open-tool ❤️
+
+## Quick Setup
+
+1. Install: Add `@pinegrow/nuxt-module` to your project
+
+```bash
+# Using npm
+npm install --save-dev @pinegrow/nuxt-module
+
+# Using pnpm
+pnpm add --save-dev @pinegrow/nuxt-module
+```
+
+2. Configure: Add `@pinegrow/nuxt-module` to your Nuxt Integrations array `nuxt.config.{js,ts}`
+
+```js
+//nuxt.config.js (or) nuxt.config.ts
+
+export default defineNuxtConfig({
+	modules: [
+		'@pinegrow/nuxt-module',
+		//...
+	],
+	pinegrow: {
+		liveDesigner: {
+			//...
+		},
+	},
+	//...
+})
+```
+
+Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Pinegrow
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/nuxt-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@pinegrow/nuxt-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/nuxt-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@pinegrow/nuxt-module
+[license-src]: https://img.shields.io/npm/l/@pinegrow/nuxt-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@pinegrow/nuxt-module

package/dist/chunks/live-designer.mjs

@@ -1,6 +1,7 @@
 import pkg from '@pinegrow/vite-plugin';
 
 // import { liveDesigner } from '@pinegrow/vite-plugin/dev'
+
 const liveDesigner = pkg.liveDesigner;
 
 export { liveDesigner };

package/dist/module.d.ts

@@ -1,16 +1,15 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { LiveDesignerOptions } from '@pinegrow/vite-plugin';
 
-interface ModuleOptions {
+interface PinegrowNuxtModuleOptions {
+    /**
+     * Pinegrow Live Designer options
+     * For details, check https://pinegrow.com/vue-designer
+     */
     liveDesigner?: {
-        repoRoot?: string;
-        configPath?: string;
-        plugins?: string[];
-        usingStandaloneVueDevtools?: boolean;
-        customTypes?: {
-            default?: {};
-        };
-    };
+        [key in string]?: any;
+    } & LiveDesignerOptions;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<PinegrowNuxtModuleOptions>;
 
-export { ModuleOptions, _default as default };
+export { PinegrowNuxtModuleOptions, _default as default };

package/dist/module.json

@@ -2,7 +2,7 @@
   "name": "pinegrow",
   "configKey": "pinegrow",
   "compatibility": {
-    "nuxt": "^3.0.0 || ~3.0.0-rc"
+    "nuxt": "^3.1.0"
   },
-  "version": "3.0.0-beta.12"
+  "version": "3.0.0-beta.129"
 }

package/dist/module.mjs

@@ -1,34 +1,23 @@
-import { defineNuxtModule, addVitePlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerPlugin, useNitro, addVitePlugin } from '@nuxt/kit';
 
 const module = defineNuxtModule({
-  meta: {
-    name: "pinegrow",
-    configKey: "pinegrow",
-    compatibility: {
-      nuxt: "^3.0.0 || ~3.0.0-rc"
-    }
-  },
-  defaults: {
-    liveDesigner: {
-      plugins: [],
-      usingStandaloneVueDevtools: false,
-      customTypes: {
-        default: {}
-      }
-    }
-  },
-  hooks: {},
   async setup(moduleOptions, nuxt) {
     if (moduleOptions.liveDesigner) {
+      const nuxtInstance = nuxt;
+      let pluginInstance;
+      const { resolve } = createResolver(import.meta.url);
+      addServerPlugin(resolve("./runtime/nitro-plugin.mjs"));
       nuxt.hook("listen", async (listenerServer) => {
         try {
           const { liveDesigner } = await import('./chunks/live-designer.mjs');
-          addVitePlugin(
-            liveDesigner({
-              ...moduleOptions.liveDesigner,
-              listenerServer
-            })
-          );
+          const nitroApp = useNitro();
+          pluginInstance = liveDesigner({
+            ...moduleOptions.liveDesigner,
+            listenerServer,
+            nuxtInstance,
+            nitroApp
+          });
+          addVitePlugin(pluginInstance);
         } catch (err) {
           console.log(err);
           console.log(
@@ -37,7 +26,35 @@ const module = defineNuxtModule({
         }
       });
     }
-  }
+  },
+  meta: {
+    // Usually  npm package name of your module
+    name: "pinegrow",
+    // The key in `nuxt.config` that holds your module options
+    configKey: "pinegrow",
+    // Compatibility constraints
+    compatibility: {
+      // Semver version of supported nuxt versions
+      nuxt: "^3.1.0"
+    }
+  },
+  // Default configuration options for your module
+  defaults: {
+    liveDesigner: {
+      // repoRoot: './',
+      // configPath: './',
+      // devtoolsKey: 'devtools',
+      // routerHistoryMode: 'html5',
+      plugins: [],
+      tailwindcss: {
+        configPath: "@/tailwind.config.js",
+        cssPath: "@/assets/css/tailwind.css"
+        // restartOnConfigUpdate: false,
+        // restartOnThemeUpdate: false,
+      }
+    }
+  },
+  hooks: {}
 });
 
 export { module as default };

package/dist/runtime/nitro-plugin.d.mts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/nitro-plugin.mjs

@@ -0,0 +1,223 @@
+import { defineNitroPlugin } from 'nitropack/runtime/plugin'
+// import { fileURLToPath, URL } from 'node:url'
+// import htmlParser from 'node-html-parser'
+import path from 'path'
+import fs from 'fs'
+
+export default defineNitroPlugin(async nitroApp => {
+	// const nitroInstance = nitroApp
+	// const runtimeConfig = await nitroInstance.hooks.callHook(
+	//   'nitro-runtime'
+	// )
+
+	nitroApp.hooks.hook('render:html', async (htmlContext, { event }) => {
+		// console.log('render:html', htmlContext)
+		// htmlContext.bodyAppend.push('<hr>Appended by custom plugin')
+
+		// const runtimeConfig = await nitroInstance.hooks.callHook(
+		// 	'transform-index-html',
+		// 	htmlContext
+		// )
+		const projectRoot = process.cwd()
+
+		// https://github.com/unjs/nitro/discussions/1080
+
+		const addons = [
+			{
+				name: 'pgia',
+				resources: [
+					{
+						// condition: 'interactions',
+						parentResource: `public/pgia`, // relative to project root, must exists
+						// source: `<script src="pgia/index.js"></script>`,
+						injectTo: 'head-append',
+						tag: 'script',
+						children: `
+		            /* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()`,
+					},
+					{
+						// condition: 'interactions',
+						parentResource: `public/pgia`, // relative to project root, must exists
+						injectTo: 'body-append',
+						tag: 'script',
+						attrs: { src: '/pgia/lib/index.js' },
+					},
+				],
+			},
+		]
+
+		addons.forEach(addon => {
+			addon.resources.forEach(resource => {
+				if (
+					!resource.condition /*|| this.customOptions[resource.condition] */
+				) {
+					try {
+						let parentResourceExists = true
+
+						if (resource.parentResource) {
+							const resourcePath = path.resolve(
+								projectRoot,
+								resource.parentResource
+							)
+							parentResourceExists =
+								parentResourceExists &&
+								fs.existsSync(resourcePath)
+						}
+
+						if (parentResourceExists) {
+							const attrContent = Object.entries(
+								resource.attrs || {}
+							).reduce((acc, [key, value]) => {
+								return `${acc}${key}${
+									value && value !== true ? `="${value}"` : ''
+								}`
+							}, '')
+
+							switch (resource.injectTo) {
+								case 'head-prepend':
+								case 'head-append':
+									htmlContext.head.push(`<${
+										resource.tag
+									} ${attrContent}>
+                  ${resource.children || ''}
+                  </${resource.tag}>`)
+									break
+
+								case 'body-prepend':
+									htmlContext.bodyPrepend.push(`<${
+										resource.tag
+									} ${attrContent}>
+                  ${resource.children || ''}
+                  </${resource.tag}>`)
+									break
+
+								case 'body-append':
+									htmlContext.bodyAppend.push(`<${
+										resource.tag
+									} ${attrContent}>
+                  ${resource.children || ''}
+                  </${resource.tag}>`)
+									break
+							}
+						}
+					} catch (err) {
+						console.log(err)
+					}
+				}
+			})
+		})
+
+		// const dev_server_url = event.req.headers.referer // event.req.headers.host
+		// const pinegrow_url = process.env.pinegrow_url
+
+		// if (pinegrow_url) {
+		// 	const pinegrow_base_url = new URL(pinegrow_url)
+		// 	pinegrow_base_url.port = pinegrow_base_url.port - 1
+
+		// 	htmlContext.head = htmlContext.head.reduce((acc, headItem) => {
+		// 		if (headItem.startsWith('<link')) {
+		// 			try {
+		// 				const linkNode = htmlParser.parse(headItem, 'text/html')
+		// 				// .childNodes[0]
+		// 				const linkHref = linkNode.getAttribute('href')
+		// 				const linkPath = path.resolve(
+		// 					projectRoot,
+		// 					`${linkHref}` // `.${linkHref}`
+		// 				)
+		// 				if (fs.existsSync(linkPath)) {
+		// 					linkNode.setAttribute(
+		// 						'href',
+		// 						new URL(
+		// 							path.relative(projectRoot, linkHref),
+		// 							pinegrow_base_url
+		// 						).href
+		// 					)
+		// 				}
+		// 				return [...acc, linkNode.outerHTML]
+		// 			} catch (err) {
+		// 				// console.log(err)
+		// 			}
+		// 		}
+		// 		return [...acc, headItem]
+		// 	}, [])
+
+		// 	// Auto add css file from public folder, so that pinegrow thinks it is loaded from internal server
+		// 	const publicFolder = path.resolve(projectRoot, 'public')
+		// 	if (isExistsAndDirectory(publicFolder)) {
+		// 		fs.readdirSync(publicFolder).forEach(fileName => {
+		// 			const folderPath = publicFolder
+		// 			const filePath = path.resolve(folderPath, fileName)
+		// 			const fileExtn = path.extname(fileName)
+
+		// 			if (isFile(filePath) && fileExtn === '.css') {
+		// 				const linkHref = new URL(
+		// 					path.relative(projectRoot, filePath),
+		// 					dev_server_url //pinegrow_base_url
+		// 				).href
+		// 				htmlContext.head.push(
+		// 					`<link ref="stylesheet" href="${linkHref}">`
+		// 					// `<link ref="stylesheet" href="./${linkHref}">`
+		// 				)
+		// 				// const linkHref = new URL(
+		// 				// 	path.relative(projectRoot, filePath),
+		// 				// 	pinegrow_base_url
+		// 				// ).href
+		// 				// // const linkHref = path.relative(projectRoot, filePath)
+		// 				// htmlContext.head.push(
+		// 				// 	// `<link ref="stylesheet" href="${linkHref}">`
+		// 				// 	`<link ref="stylesheet" href="${linkHref}">`
+		// 				// )
+		// 				// htmlContext.head.push(
+		// 				// 	// `<link ref="stylesheet" href="${linkHref}">`
+		// 				// 	`<link ref="stylesheet" href="file://${filePath}">`
+		// 				// )
+		// 			}
+		// 		})
+		// 	}
+		// }
+	})
+	// nitroApp.hooks.hook('render:response', (response, { event }) => {
+	// 	console.log('render:response', response)
+	// })
+})
+
+// var isExistsAndFile = filePath => isExistsPath(filePath) && isFile(filePath)
+
+// var isExistsAndDirectory = filePath =>
+// 	isExistsPath(filePath) && isDirectory(filePath)
+
+// var isExistsPath = (filePath, root) => {
+// 	const fullPath = toAbsolutePath(filePath, root)
+// 	return !!(fullPath && fs.existsSync(fullPath))
+// }
+
+// var isFile = (filePath, root) => {
+// 	const fullPath = toAbsolutePath(filePath, root)
+// 	return !!(fullPath && fs.statSync(fullPath).isFile())
+// }
+
+// var isDirectory = (filePath, root) => {
+// 	const fullPath = toAbsolutePath(filePath, root)
+// 	return !!(fullPath && fs.statSync(fullPath).isDirectory())
+// }
+
+// var toAbsolutePath = (filePath, root, searchDir) => {
+// 	try {
+// 		if (path.isAbsolute(filePath)) {
+// 			return filePath
+// 		} else {
+// 			if (root) {
+// 				if (searchDir) {
+// 					return path.resolve(root, searchDir, filePath)
+// 				} else {
+// 					return path.resolve(root, filePath)
+// 				}
+// 			} else {
+// 				// No root, no project
+// 				return false
+// 			}
+// 		}
+// 	} catch (err) {
+// 		console.log(err)
+// 	}
+// }

package/dist/types.d.ts

@@ -1,10 +1,7 @@
 
-import { ModuleOptions } from './module'
+import {  } from './module'
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['pinegrow']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['pinegrow']?: ModuleOptions }
-}
 
 
-export { ModuleOptions, default } from './module'
+
+export { PinegrowNuxtModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/nuxt-module",
-	"version": "3.0.0-beta.13",
+	"version": "3.0.0-beta.130",
 	"description": "Pinegrow Nuxt Module",
 	"author": "Pinegrow (http://pinegrow.com/)",
 	"license": "MIT",
@@ -19,7 +19,9 @@
 	"types": "./dist/types.d.ts",
 	"keywords": [
 		"pinegrow",
-		"nuxt module"
+		"vue-designer",
+		"nuxt-module",
+		"@pinegrow/nuxt-module"
 	],
 	"scripts": {
 		"build": "npm run dev:prepare && npm run build:module",
@@ -28,16 +30,24 @@
 		"dev:build": "nuxi build playground",
 		"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
 		"publish-beta": "npm run increment-beta-version && npm publish",
-		"increment-beta-version": "npm version prerelease --preid=beta"
+		"increment-beta-version": "npm version prerelease --preid=beta",
+		"lint": "npm run lint:fix && npm run format",
+		"lint:fix": "eslint --ext .js,.cjs,.ts,.vue --ignore-path .gitignore --fix ./src",
+		"format": "prettier --write ."
 	},
 	"dependencies": {
 		"@nuxt/kit": "latest",
-		"@pinegrow/vite-plugin": "latest"
+		"@pinegrow/vite-plugin": "3.0.0-beta.130"
 	},
 	"devDependencies": {
 		"@nuxt/module-builder": "latest",
-		"@nuxtjs/eslint-config-typescript": "latest",
-		"eslint": "latest",
-		"nuxt": "rc"
+		"@nuxt/eslint-config": "^0.1.1",
+		"nuxt": "^3.1.0",
+		"eslint": "^8.35.0",
+		"eslint-config-prettier": "^8.7.0",
+		"prettier": "^2.8.4"
+	},
+	"peerDependencies": {
+		"nuxt": "^3.1.0"
 	}
 }