@pinegrow/iles-module 3.0.0-beta.110 → 3.0.0-beta.112
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.
- package/README.md +77 -3
- package/dist/index.cjs +79 -86
- package/dist/index.js +79 -86
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,6 +1,80 @@
|
|
|
1
|
-
|
|
1
|
+
<!-- [](https://tailwindcss.nuxtjs.org) -->
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Pinegrow Iles Module
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[![npm version][npm-version-src]][npm-version-href]
|
|
6
|
+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
7
|
+
[![License][license-src]][license-href]
|
|
8
|
+
|
|
9
|
+
[Iles](https://iles.pages.dev/) module for [Pinegrow](https://pinegrow.com) ⚡️
|
|
10
|
+
|
|
11
|
+
Pinegrow Iles Module enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer)."
|
|
12
|
+
|
|
13
|
+
- [📖 Documentation](https://pinegrow.com/vue-designer)
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- 🎨 Visually live-design your Vite-powered Iles apps
|
|
18
|
+
- ⚙️ Smartly integrates into your Iles workflow in dev-mode only
|
|
19
|
+
- ✨ No lock-in, Pinegrow is an open-tool ❤️
|
|
20
|
+
|
|
21
|
+
## Quick Setup
|
|
22
|
+
|
|
23
|
+
1. Install: Add `@pinegrow/iles-module` to your project
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Using npm
|
|
27
|
+
npm install --save-dev @pinegrow/iles-module
|
|
28
|
+
|
|
29
|
+
# Using pnpm
|
|
30
|
+
pnpm add --save-dev @pinegrow/iles-module
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
2. Configure: Add `@pinegrow/iles-module` to your Iles Integrations array `iles.config.{js,ts}`
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
//iles.config.js (or) iles.config.ts
|
|
37
|
+
|
|
38
|
+
import { defineConfig } from 'iles'
|
|
39
|
+
|
|
40
|
+
export default defineConfig({
|
|
41
|
+
modules: [
|
|
42
|
+
[
|
|
43
|
+
'@pinegrow/iles-module',
|
|
44
|
+
{
|
|
45
|
+
liveDesigner: {
|
|
46
|
+
//...
|
|
47
|
+
},
|
|
48
|
+
// https://github.com/antfu/unplugin-auto-import#configuration
|
|
49
|
+
autoImportAPIs: {
|
|
50
|
+
// imports: [
|
|
51
|
+
// '@vueuse/head',
|
|
52
|
+
// '@vueuse/core',
|
|
53
|
+
// // add presets
|
|
54
|
+
// ],
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
//...
|
|
59
|
+
],
|
|
60
|
+
//...
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
|
|
65
|
+
|
|
66
|
+
## License
|
|
67
|
+
|
|
68
|
+
[MIT License](./LICENSE)
|
|
69
|
+
|
|
70
|
+
Copyright (c) Pinegrow
|
|
71
|
+
|
|
72
|
+
<!-- Badges -->
|
|
73
|
+
|
|
74
|
+
[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/iles-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
75
|
+
[npm-version-href]: https://npmjs.com/package/@pinegrow/iles-module
|
|
76
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/iles-module.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
77
|
+
[npm-downloads-href]: https://npmjs.com/package/@pinegrow/iles-module
|
|
78
|
+
[license-src]: https://img.shields.io/npm/l/@pinegrow/iles-module.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
79
|
+
[license-href]: https://npmjs.com/package/@pinegrow/iles-module
|
|
6
80
|
|
package/dist/index.cjs
CHANGED
|
@@ -95,96 +95,89 @@ async function src_default(moduleOptions) {
|
|
|
95
95
|
vite: await getViteConfiguration(moduleOptions),
|
|
96
96
|
// Just like in Vite plugins you can use this hook to extend the user config
|
|
97
97
|
config(config) {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const addons = [
|
|
98
|
+
config.vue.reactivityTransform = false;
|
|
99
|
+
config.ssg.beforePageRender = (page) => {
|
|
100
|
+
const doc = _nodehtmlparser2.default.parse(page.rendered, "text/html");
|
|
101
|
+
const addons = [
|
|
102
|
+
{
|
|
103
|
+
name: "pgia",
|
|
104
|
+
resources: [
|
|
106
105
|
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
injectTo: "body-append",
|
|
124
|
-
tag: "script",
|
|
125
|
-
attrs: { src: "/pgia/lib/index.js" }
|
|
126
|
-
}
|
|
127
|
-
]
|
|
106
|
+
// condition: 'interactions',
|
|
107
|
+
parentResource: `public/pgia`,
|
|
108
|
+
// relative to project root, must exists
|
|
109
|
+
// source: `<script src="pgia/index.js"></script>`,
|
|
110
|
+
injectTo: "head-append",
|
|
111
|
+
tag: "script",
|
|
112
|
+
children: `
|
|
113
|
+
/* 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);}})()`
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
// condition: 'interactions',
|
|
117
|
+
parentResource: `public/pgia`,
|
|
118
|
+
// relative to project root, must exists
|
|
119
|
+
injectTo: "body-append",
|
|
120
|
+
tag: "script",
|
|
121
|
+
attrs: { src: "/pgia/lib/index.js" }
|
|
128
122
|
}
|
|
129
|
-
]
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
} catch (err) {
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
];
|
|
126
|
+
addons.forEach((addon) => {
|
|
127
|
+
addon.resources.forEach((resource) => {
|
|
128
|
+
if (!resource.condition) {
|
|
129
|
+
try {
|
|
130
|
+
let parentResourceExists = true;
|
|
131
|
+
if (resource.parentResource) {
|
|
132
|
+
const projectRoot = process.cwd();
|
|
133
|
+
const resourcePath = _path2.default.resolve(projectRoot, resource.parentResource);
|
|
134
|
+
parentResourceExists = parentResourceExists && _fs2.default.existsSync(resourcePath);
|
|
135
|
+
}
|
|
136
|
+
if (parentResourceExists) {
|
|
137
|
+
const attrContent = Object.entries(resource.attrs || {}).reduce(
|
|
138
|
+
(acc, [key, value]) => {
|
|
139
|
+
return `${acc}${key}${value && value !== true ? `="${value}"` : ""}`;
|
|
140
|
+
},
|
|
141
|
+
""
|
|
142
|
+
);
|
|
143
|
+
let parentNode, sourceNode;
|
|
144
|
+
switch (resource.injectTo) {
|
|
145
|
+
case "head-prepend":
|
|
146
|
+
parentNode = doc.querySelector("head");
|
|
147
|
+
sourceNode = _nodehtmlparser2.default.parse(`<${resource.tag} ${attrContent}>
|
|
148
|
+
${resource.children || ""}
|
|
149
|
+
</${resource.tag}>`);
|
|
150
|
+
parentNode.childNodes.unshift(sourceNode);
|
|
151
|
+
break;
|
|
152
|
+
case "head-append":
|
|
153
|
+
parentNode = doc.querySelector("head");
|
|
154
|
+
sourceNode = _nodehtmlparser2.default.parse(`<${resource.tag} ${attrContent}>
|
|
155
|
+
${resource.children || ""}
|
|
156
|
+
</${resource.tag}>`);
|
|
157
|
+
parentNode.appendChild(sourceNode);
|
|
158
|
+
break;
|
|
159
|
+
case "body-prepend":
|
|
160
|
+
parentNode = doc.querySelector("body");
|
|
161
|
+
sourceNode = _nodehtmlparser2.default.parse(`<${resource.tag} ${attrContent}>
|
|
162
|
+
${resource.children || ""}
|
|
163
|
+
</${resource.tag}>`);
|
|
164
|
+
parentNode.childNodes.unshift(sourceNode);
|
|
165
|
+
break;
|
|
166
|
+
case "body-append":
|
|
167
|
+
parentNode = doc.querySelector("body");
|
|
168
|
+
sourceNode = _nodehtmlparser2.default.parse(`<${resource.tag} ${attrContent}>
|
|
169
|
+
${resource.children || ""}
|
|
170
|
+
</${resource.tag}>`);
|
|
171
|
+
parentNode.appendChild(sourceNode);
|
|
172
|
+
break;
|
|
180
173
|
}
|
|
181
174
|
}
|
|
182
|
-
})
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
175
|
+
} catch (err) {
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
page.rendered = doc.outerHTML;
|
|
188
181
|
};
|
|
189
182
|
}
|
|
190
183
|
};
|
package/dist/index.js
CHANGED
|
@@ -95,96 +95,89 @@ async function src_default(moduleOptions) {
|
|
|
95
95
|
vite: await getViteConfiguration(moduleOptions),
|
|
96
96
|
// Just like in Vite plugins you can use this hook to extend the user config
|
|
97
97
|
config(config) {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const addons = [
|
|
98
|
+
config.vue.reactivityTransform = false;
|
|
99
|
+
config.ssg.beforePageRender = (page) => {
|
|
100
|
+
const doc = htmlParser.parse(page.rendered, "text/html");
|
|
101
|
+
const addons = [
|
|
102
|
+
{
|
|
103
|
+
name: "pgia",
|
|
104
|
+
resources: [
|
|
106
105
|
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
injectTo: "body-append",
|
|
124
|
-
tag: "script",
|
|
125
|
-
attrs: { src: "/pgia/lib/index.js" }
|
|
126
|
-
}
|
|
127
|
-
]
|
|
106
|
+
// condition: 'interactions',
|
|
107
|
+
parentResource: `public/pgia`,
|
|
108
|
+
// relative to project root, must exists
|
|
109
|
+
// source: `<script src="pgia/index.js"></script>`,
|
|
110
|
+
injectTo: "head-append",
|
|
111
|
+
tag: "script",
|
|
112
|
+
children: `
|
|
113
|
+
/* 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);}})()`
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
// condition: 'interactions',
|
|
117
|
+
parentResource: `public/pgia`,
|
|
118
|
+
// relative to project root, must exists
|
|
119
|
+
injectTo: "body-append",
|
|
120
|
+
tag: "script",
|
|
121
|
+
attrs: { src: "/pgia/lib/index.js" }
|
|
128
122
|
}
|
|
129
|
-
]
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
} catch (err) {
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
];
|
|
126
|
+
addons.forEach((addon) => {
|
|
127
|
+
addon.resources.forEach((resource) => {
|
|
128
|
+
if (!resource.condition) {
|
|
129
|
+
try {
|
|
130
|
+
let parentResourceExists = true;
|
|
131
|
+
if (resource.parentResource) {
|
|
132
|
+
const projectRoot = process.cwd();
|
|
133
|
+
const resourcePath = path.resolve(projectRoot, resource.parentResource);
|
|
134
|
+
parentResourceExists = parentResourceExists && fs.existsSync(resourcePath);
|
|
135
|
+
}
|
|
136
|
+
if (parentResourceExists) {
|
|
137
|
+
const attrContent = Object.entries(resource.attrs || {}).reduce(
|
|
138
|
+
(acc, [key, value]) => {
|
|
139
|
+
return `${acc}${key}${value && value !== true ? `="${value}"` : ""}`;
|
|
140
|
+
},
|
|
141
|
+
""
|
|
142
|
+
);
|
|
143
|
+
let parentNode, sourceNode;
|
|
144
|
+
switch (resource.injectTo) {
|
|
145
|
+
case "head-prepend":
|
|
146
|
+
parentNode = doc.querySelector("head");
|
|
147
|
+
sourceNode = htmlParser.parse(`<${resource.tag} ${attrContent}>
|
|
148
|
+
${resource.children || ""}
|
|
149
|
+
</${resource.tag}>`);
|
|
150
|
+
parentNode.childNodes.unshift(sourceNode);
|
|
151
|
+
break;
|
|
152
|
+
case "head-append":
|
|
153
|
+
parentNode = doc.querySelector("head");
|
|
154
|
+
sourceNode = htmlParser.parse(`<${resource.tag} ${attrContent}>
|
|
155
|
+
${resource.children || ""}
|
|
156
|
+
</${resource.tag}>`);
|
|
157
|
+
parentNode.appendChild(sourceNode);
|
|
158
|
+
break;
|
|
159
|
+
case "body-prepend":
|
|
160
|
+
parentNode = doc.querySelector("body");
|
|
161
|
+
sourceNode = htmlParser.parse(`<${resource.tag} ${attrContent}>
|
|
162
|
+
${resource.children || ""}
|
|
163
|
+
</${resource.tag}>`);
|
|
164
|
+
parentNode.childNodes.unshift(sourceNode);
|
|
165
|
+
break;
|
|
166
|
+
case "body-append":
|
|
167
|
+
parentNode = doc.querySelector("body");
|
|
168
|
+
sourceNode = htmlParser.parse(`<${resource.tag} ${attrContent}>
|
|
169
|
+
${resource.children || ""}
|
|
170
|
+
</${resource.tag}>`);
|
|
171
|
+
parentNode.appendChild(sourceNode);
|
|
172
|
+
break;
|
|
180
173
|
}
|
|
181
174
|
}
|
|
182
|
-
})
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
175
|
+
} catch (err) {
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
page.rendered = doc.outerHTML;
|
|
188
181
|
};
|
|
189
182
|
}
|
|
190
183
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinegrow/iles-module",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.112",
|
|
4
4
|
"description": "Pinegrow Iles Module",
|
|
5
5
|
"author": "Pinegrow (http://pinegrow.com/)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,7 +20,9 @@
|
|
|
20
20
|
},
|
|
21
21
|
"keywords": [
|
|
22
22
|
"pinegrow",
|
|
23
|
-
"
|
|
23
|
+
"vue-designer",
|
|
24
|
+
"iles-module",
|
|
25
|
+
"@pinegrow/iles-module"
|
|
24
26
|
],
|
|
25
27
|
"scripts": {
|
|
26
28
|
"dev": "npm run build -- --watch",
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
"increment-beta-version": "npm version prerelease --preid=beta"
|
|
32
34
|
},
|
|
33
35
|
"dependencies": {
|
|
34
|
-
"@pinegrow/vite-plugin": "3.0.0-beta.
|
|
36
|
+
"@pinegrow/vite-plugin": "3.0.0-beta.112",
|
|
35
37
|
"node-html-parser": "^6.1.5",
|
|
36
38
|
"unplugin-auto-import": "^0.15.2"
|
|
37
39
|
},
|