@falcondev-it/vue-elementor
Version:
Export Vue components as Elementor widgets using Vite
417 lines (350 loc) • 15.1 kB
JavaScript
var $8zHUo$fsextra = require("fs-extra");
var $8zHUo$vite = require("vite");
var $8zHUo$pkg = require("pkg");
var $8zHUo$nodefspromises = require("node:fs/promises");
var $8zHUo$process = require("process");
var $8zHUo$nodepath = require("node:path");
var $8zHUo$c12 = require("c12");
var $8zHUo$slugify = require("slugify");
var $8zHUo$zod = require("zod");
var $8zHUo$consola = require("consola");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "main", () => $fd046e7a82b9f872$export$f22da7240b7add18);
const $2a206b131cc3b47b$export$dc5fc4fedbe84668 = (0, $8zHUo$zod.z).object({
name: (0, $8zHUo$zod.z).string(),
component: (0, $8zHUo$zod.z).string()
});
const $2a206b131cc3b47b$export$f9c9c7d27ab72fdf = (0, $8zHUo$zod.z).object({
elements: (0, $8zHUo$zod.z).array($2a206b131cc3b47b$export$dc5fc4fedbe84668),
ssrBinaryTarget: (0, $8zHUo$zod.z).object({
node: (0, $8zHUo$zod.z).enum([
"latest",
"12",
"14",
"16"
]),
platform: (0, $8zHUo$zod.z).enum([
"linux",
"macos",
"win",
"alpine"
]),
arch: (0, $8zHUo$zod.z).enum([
"x64",
"arm64"
])
}),
wordpressPluginSettings: (0, $8zHUo$zod.z).object({
name: (0, $8zHUo$zod.z).string(),
templateFile: (0, $8zHUo$zod.z).string().optional(),
widgetSettings: (0, $8zHUo$zod.z).array((0, $8zHUo$zod.z).object({
id: (0, $8zHUo$zod.z).string(),
options: (0, $8zHUo$zod.z).any(),
controls: (0, $8zHUo$zod.z).array((0, $8zHUo$zod.z).object({
responsive: (0, $8zHUo$zod.z).boolean().optional(),
name: (0, $8zHUo$zod.z).string(),
options: (0, $8zHUo$zod.z).any()
}))
})).optional()
})
});
function $2a206b131cc3b47b$export$392f0c1c090a6833(issues) {
return issues.map((issue)=>{
return `Property ${issue.path.join(".")}: ${issue.message}`;
}).join("\n");
}
let $bedc972a8eff2e53$export$1630b5343357e8b5;
const $bedc972a8eff2e53$var$readPackageJson = async ()=>{
const packagesJsonPath = $8zHUo$nodepath.join($8zHUo$process.cwd(), "package.json");
const packagesJsonContents = await $8zHUo$nodefspromises.readFile(packagesJsonPath, "utf-8").then((data)=>data.toString());
return JSON.parse(packagesJsonContents);
};
const $bedc972a8eff2e53$export$c1a4367d4847eb06 = async ()=>{
const configData = await $8zHUo$c12.loadConfig({
name: "vue-elementor"
});
const validatedConfig = await (0, $2a206b131cc3b47b$export$f9c9c7d27ab72fdf).parseAsync(configData.config).catch((err)=>{
Log.error(`Config file not found or invalid:\n${(0, $2a206b131cc3b47b$export$392f0c1c090a6833)(err.errors)}`);
$8zHUo$process.exit(1);
});
$bedc972a8eff2e53$export$1630b5343357e8b5 = {
...validatedConfig,
pluginNameSlug: (0, ($parcel$interopDefault($8zHUo$slugify)))(validatedConfig.wordpressPluginSettings.name, {
lower: true,
strict: true
}),
version: await $bedc972a8eff2e53$var$readPackageJson().then((data)=>data.version)
};
};
function $fbd76184773d5e88$export$73bda83cddbc7187(str) {
return str.replace(/^[a-z]/i, (letter)=>letter.toLowerCase()).replace(/[A-Z]/g, (letter)=>`-${letter.toLowerCase()}`);
}
const $2bdbb457f43078ff$export$a8fc3402335b0b04 = {
ssrScript: (element)=>{
return `
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import Component from '@/../${element.component}'
const params = JSON.parse(process.argv.slice(2).join('') || '{}')
const app = createSSRApp(Component, params)
renderToString(app).then((html) => {
console.log(\`<${(0, $fbd76184773d5e88$export$73bda83cddbc7187)(element.name)} widget-id="\${params.widgetId}">\${html}</${(0, $fbd76184773d5e88$export$73bda83cddbc7187)(element.name)}>\`)
})
`;
},
clientScript: (element)=>{
return `
import { defineCustomElement } from 'vue'
import Component from '@/../${element.component}'
const Element = defineCustomElement({
setup: () => {
return (vue) => {
return h(Component, {
settings: window.__VUE_ELEMENTOR_DATA__[vue?.$attrs?.widgetId ?? ''],
...(vue?.$attrs ?? {}),
})
}
},
styles: Component.styles
})
customElements.define('${(0, $fbd76184773d5e88$export$73bda83cddbc7187)(element.name)}', Element)
`;
},
wordpressWidget: (element)=>{
return `<?php
if (!defined('ABSPATH')) {
exit;
}
class Elementor_${element.name}_Widget extends \\Elementor\\Widget_Base
{
public function get_name()
{
return '${element.name}';
}
public function get_title()
{
return '${element.name}';
}
public function get_icon()
{
return 'eicon-code';
}
public function get_script_depends()
{
return ['elementor-${element.name}-widget'];
}
public function get_style_depends()
{
return ['elementor-${element.name}-widget'];
}
public function get_categories()
{
return ['general'];
}
public function get_keywords()
{
return [];
}
protected function register_controls()
{
${!(0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.widgetSettings ? "" : (0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.widgetSettings.map((section)=>{
return `
$this->start_controls_section(
'${section.id}',
[
${Object.entries(section.options ?? {}).map(([key, value])=>{
return key === "tab" || typeof value !== "string" ? `'${key}' => ${value}` : `'${key}' => '${value}'`;
}).join(",\n")}
]
);
${section.controls.map((control)=>{
return `
$this->${control.responsive ? "add_responsive_control" : "add_control"}(
'${control.name}',
[
${Object.entries(control.options ?? {}).map(([key, value])=>{
return key === "type" || typeof value !== "string" ? `'${key}' => ${value}` : `'${key}' => '${value}'`;
}).join(",\n")}
]
);
`;
}).join("\n")}
$this->end_controls_section();
`;
}).join("\n")}
}
protected function render()
{
$html = [];
$args = [
"settings" => $this->get_settings_for_display(),
"widgetId" => $this->get_id()
];
$script = '<script> if(!window.__VUE_ELEMENTOR_DATA__) { window.__VUE_ELEMENTOR_DATA__ = {} } window.__VUE_ELEMENTOR_DATA__["' . $args['widgetId'] . '"] = ' . json_encode($args['settings']) . ' </script>';
echo $script;
exec(__DIR__ . '/assets/${element.name}.ssr ' . json_encode(json_encode($args)), $html);
for ($i = 0; $i < count($html); $i++) {
echo $html[$i];
}
}
}
`;
},
wordpressPlugin: async ()=>{
const pluginOutletString = `
function register_widgets($widgets_manager)
{
${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).elements.map((element)=>{
return `require_once(__DIR__ . '/${element.name}.widget.php');
$widgets_manager->register(new \\Elementor_${element.name}_Widget());`;
}).join("\n")}
}
add_action('elementor/widgets/register', 'register_widgets');
function register_dependencies()
{
${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).elements.map((element)=>{
return `
wp_register_script('elementor-${element.name}-widget', plugin_dir_url(__FILE__) . 'assets/${element.name}.el.js', [], '${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).version}', false);
//wp_register_style('elementor-${element.name}-widget', plugin_dir_url(__FILE__) . 'assets/${element.name}.el.css', [], '${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).version}', 'all');`;
})}
}
add_action('wp_enqueue_scripts', 'register_dependencies');
function add_type_attribute($tag, $handle, $src)
{
$pattern = "/${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).elements.map((el)=>el.name).join("|")}/i";
if (!preg_match($pattern, $handle)) {
return $tag;
}
$tag = '<script type="module" src="' . esc_url($src) . '"></script>';
return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute', 10, 3);
function make_script_executable()
{
${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).elements.map((element)=>{
return `exec('chmod +x ' . __DIR__ . '/assets/${element.name}.ssr');`;
}).join("\n")}
}
register_activation_hook(
__FILE__,
'make_script_executable'
);
`;
if ((0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.templateFile) {
const templateFilePath = $8zHUo$nodepath.join($8zHUo$process.cwd(), (0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.templateFile);
const templateFileContents = await $8zHUo$nodefspromises.readFile(templateFilePath, "utf-8").then((data)=>data.toString());
const placeholderRegex = /\/\/\s*VUE-ELEMENTOR-OUTLET/gi;
const hasPlaceholders = placeholderRegex.test(templateFileContents);
if (!hasPlaceholders) throw new Error("The template file does not contain the required placeholder (// VUE-ELEMENTOR-OUTLET)");
return templateFileContents.replace(placeholderRegex, pluginOutletString).trim();
}
return `<?php
/**
* Plugin Name: ${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.name}
* Description: ${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).wordpressPluginSettings.name}
* Plugin URI: https://elementor.com/
* Version: ${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).version}
* Author: Elementor Developer
* Author URI: https://developers.elementor.com/
*
* Elementor tested up to: 3.7.0
* Elementor Pro tested up to: 3.7.0
*/
if (!defined('ABSPATH')) {
exit;
}
${pluginOutletString}
`.trim();
}
};
const $312217012d296c90$export$8bba547025987a4b = async ()=>{
await $8zHUo$nodefspromises.rm("dist", {
recursive: true,
force: true
});
await $8zHUo$nodefspromises.rm("elementor-dist", {
recursive: true,
force: true
});
};
const $312217012d296c90$export$85a63a816292c7c4 = async ()=>{
await $8zHUo$nodefspromises.rm("elementor-dist", {
recursive: true,
force: true
});
await $8zHUo$nodefspromises.rm((0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug, {
recursive: true,
force: true
});
await $8zHUo$fsextra.ensureDir("elementor-dist");
await $8zHUo$fsextra.ensureDir(`${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}/assets`);
};
const $312217012d296c90$export$d18bbb32c20ceaa8 = async ()=>{
await $8zHUo$nodefspromises.writeFile(`${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}/${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}.php`, await (0, $2bdbb457f43078ff$export$a8fc3402335b0b04).wordpressPlugin());
};
const $312217012d296c90$export$77d9834716e1c77b = async (element)=>{
await $8zHUo$nodefspromises.writeFile(`${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}/${element.name}.widget.php`, (0, $2bdbb457f43078ff$export$a8fc3402335b0b04).wordpressWidget(element));
};
const $312217012d296c90$export$58829bc398d56156 = async (element)=>{
await $8zHUo$nodefspromises.writeFile(`elementor-dist/${element.name}/element.js`, await (0, $2bdbb457f43078ff$export$a8fc3402335b0b04).clientScript(element));
};
const $312217012d296c90$export$6fe40ebe0ac5b555 = async (element)=>{
await $8zHUo$nodefspromises.writeFile(`elementor-dist/${element.name}/ssr.js`, await (0, $2bdbb457f43078ff$export$a8fc3402335b0b04).ssrScript(element));
};
async function $d2c412543e68cdc9$export$37194dc0fced7a3a(element) {
await $8zHUo$fsextra.ensureDir(`elementor-dist/${element.name}`);
await (0, $312217012d296c90$export$58829bc398d56156)(element);
await (0, $312217012d296c90$export$6fe40ebe0ac5b555)(element);
await $d2c412543e68cdc9$var$buildClientScript(element);
await $d2c412543e68cdc9$var$buildSSRBinary(element);
}
async function $d2c412543e68cdc9$var$buildClientScript(element) {
await $d2c412543e68cdc9$var$runViteBuild(`elementor-dist/${element.name}/element.js`, `${element.name}.el.js`);
await $8zHUo$fsextra.copy(`dist/${element.name}.el.js`, `${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}/assets/${element.name}.el.js`);
}
async function $d2c412543e68cdc9$var$buildSSRBinary(element) {
await $d2c412543e68cdc9$var$runViteBuild(`elementor-dist/${element.name}/ssr.js`, `${element.name}.ssr.js`);
const arch = `node${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).ssrBinaryTarget.node}-${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).ssrBinaryTarget.platform}-${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).ssrBinaryTarget.arch}`;
await $8zHUo$pkg.exec([
`dist/${element.name}.ssr.js`,
"-C",
"GZip",
"--target",
arch,
"--output",
`${(0, $bedc972a8eff2e53$export$1630b5343357e8b5).pluginNameSlug}/assets/${element.name}.ssr`
]);
}
async function $d2c412543e68cdc9$var$runViteBuild(entry, fileName) {
return $8zHUo$vite.build({
configFile: "vite.config.ts",
build: {
lib: {
entry: entry,
formats: [
"es"
],
fileName: ()=>fileName
}
}
});
}
globalThis.Log = (0, ($parcel$interopDefault($8zHUo$consola))).create({
level: Infinity
});
const $fd046e7a82b9f872$export$f22da7240b7add18 = async ()=>{
await (0, $bedc972a8eff2e53$export$c1a4367d4847eb06)();
await (0, $312217012d296c90$export$85a63a816292c7c4)();
await (0, $312217012d296c90$export$d18bbb32c20ceaa8)();
for (const element of (0, $bedc972a8eff2e53$export$1630b5343357e8b5).elements){
await (0, $312217012d296c90$export$77d9834716e1c77b)(element);
await (0, $d2c412543e68cdc9$export$37194dc0fced7a3a)(element);
}
await (0, $312217012d296c90$export$8bba547025987a4b)();
};
//# sourceMappingURL=index.js.map