@falcondev-it/vue-elementor
Version:
Export Vue components as Elementor widgets using Vite
410 lines (344 loc) • 14.6 kB
JavaScript
import {ensureDir as $hgUW1$ensureDir, copy as $hgUW1$copy} from "fs-extra";
import {build as $hgUW1$build} from "vite";
import {exec as $hgUW1$exec} from "pkg";
import {rm as $hgUW1$rm, writeFile as $hgUW1$writeFile, readFile as $hgUW1$readFile} from "node:fs/promises";
import {cwd as $hgUW1$cwd, exit as $hgUW1$exit} from "process";
import {join as $hgUW1$join} from "node:path";
import {loadConfig as $hgUW1$loadConfig} from "c12";
import $hgUW1$slugify from "slugify";
import {z as $hgUW1$z} from "zod";
import $hgUW1$consola from "consola";
const $b84b8e4cd54c902f$export$dc5fc4fedbe84668 = (0, $hgUW1$z).object({
name: (0, $hgUW1$z).string(),
component: (0, $hgUW1$z).string()
});
const $b84b8e4cd54c902f$export$f9c9c7d27ab72fdf = (0, $hgUW1$z).object({
elements: (0, $hgUW1$z).array($b84b8e4cd54c902f$export$dc5fc4fedbe84668),
ssrBinaryTarget: (0, $hgUW1$z).object({
node: (0, $hgUW1$z).enum([
"latest",
"12",
"14",
"16"
]),
platform: (0, $hgUW1$z).enum([
"linux",
"macos",
"win",
"alpine"
]),
arch: (0, $hgUW1$z).enum([
"x64",
"arm64"
])
}),
wordpressPluginSettings: (0, $hgUW1$z).object({
name: (0, $hgUW1$z).string(),
templateFile: (0, $hgUW1$z).string().optional(),
widgetSettings: (0, $hgUW1$z).array((0, $hgUW1$z).object({
id: (0, $hgUW1$z).string(),
options: (0, $hgUW1$z).any(),
controls: (0, $hgUW1$z).array((0, $hgUW1$z).object({
responsive: (0, $hgUW1$z).boolean().optional(),
name: (0, $hgUW1$z).string(),
options: (0, $hgUW1$z).any()
}))
})).optional()
})
});
function $b84b8e4cd54c902f$export$392f0c1c090a6833(issues) {
return issues.map((issue)=>{
return `Property ${issue.path.join(".")}: ${issue.message}`;
}).join("\n");
}
let $317c51e7e2b6f5b7$export$1630b5343357e8b5;
const $317c51e7e2b6f5b7$var$readPackageJson = async ()=>{
const packagesJsonPath = $hgUW1$join($hgUW1$cwd(), "package.json");
const packagesJsonContents = await $hgUW1$readFile(packagesJsonPath, "utf-8").then((data)=>data.toString());
return JSON.parse(packagesJsonContents);
};
const $317c51e7e2b6f5b7$export$c1a4367d4847eb06 = async ()=>{
const configData = await $hgUW1$loadConfig({
name: "vue-elementor"
});
const validatedConfig = await (0, $b84b8e4cd54c902f$export$f9c9c7d27ab72fdf).parseAsync(configData.config).catch((err)=>{
Log.error(`Config file not found or invalid:\n${(0, $b84b8e4cd54c902f$export$392f0c1c090a6833)(err.errors)}`);
$hgUW1$exit(1);
});
$317c51e7e2b6f5b7$export$1630b5343357e8b5 = {
...validatedConfig,
pluginNameSlug: (0, $hgUW1$slugify)(validatedConfig.wordpressPluginSettings.name, {
lower: true,
strict: true
}),
version: await $317c51e7e2b6f5b7$var$readPackageJson().then((data)=>data.version)
};
};
function $932d51a184bb39ac$export$73bda83cddbc7187(str) {
return str.replace(/^[a-z]/i, (letter)=>letter.toLowerCase()).replace(/[A-Z]/g, (letter)=>`-${letter.toLowerCase()}`);
}
const $e571f0f22c90f607$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, $932d51a184bb39ac$export$73bda83cddbc7187)(element.name)} widget-id="\${params.widgetId}">\${html}</${(0, $932d51a184bb39ac$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, $932d51a184bb39ac$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, $317c51e7e2b6f5b7$export$1630b5343357e8b5).wordpressPluginSettings.widgetSettings ? "" : (0, $317c51e7e2b6f5b7$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, $317c51e7e2b6f5b7$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, $317c51e7e2b6f5b7$export$1630b5343357e8b5).elements.map((element)=>{
return `
wp_register_script('elementor-${element.name}-widget', plugin_dir_url(__FILE__) . 'assets/${element.name}.el.js', [], '${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).version}', false);
//wp_register_style('elementor-${element.name}-widget', plugin_dir_url(__FILE__) . 'assets/${element.name}.el.css', [], '${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).version}', 'all');`;
})}
}
add_action('wp_enqueue_scripts', 'register_dependencies');
function add_type_attribute($tag, $handle, $src)
{
$pattern = "/${(0, $317c51e7e2b6f5b7$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, $317c51e7e2b6f5b7$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, $317c51e7e2b6f5b7$export$1630b5343357e8b5).wordpressPluginSettings.templateFile) {
const templateFilePath = $hgUW1$join($hgUW1$cwd(), (0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).wordpressPluginSettings.templateFile);
const templateFileContents = await $hgUW1$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, $317c51e7e2b6f5b7$export$1630b5343357e8b5).wordpressPluginSettings.name}
* Description: ${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).wordpressPluginSettings.name}
* Plugin URI: https://elementor.com/
* Version: ${(0, $317c51e7e2b6f5b7$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 $16732b027b1a2136$export$8bba547025987a4b = async ()=>{
await $hgUW1$rm("dist", {
recursive: true,
force: true
});
await $hgUW1$rm("elementor-dist", {
recursive: true,
force: true
});
};
const $16732b027b1a2136$export$85a63a816292c7c4 = async ()=>{
await $hgUW1$rm("elementor-dist", {
recursive: true,
force: true
});
await $hgUW1$rm((0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug, {
recursive: true,
force: true
});
await $hgUW1$ensureDir("elementor-dist");
await $hgUW1$ensureDir(`${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}/assets`);
};
const $16732b027b1a2136$export$d18bbb32c20ceaa8 = async ()=>{
await $hgUW1$writeFile(`${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}/${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}.php`, await (0, $e571f0f22c90f607$export$a8fc3402335b0b04).wordpressPlugin());
};
const $16732b027b1a2136$export$77d9834716e1c77b = async (element)=>{
await $hgUW1$writeFile(`${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}/${element.name}.widget.php`, (0, $e571f0f22c90f607$export$a8fc3402335b0b04).wordpressWidget(element));
};
const $16732b027b1a2136$export$58829bc398d56156 = async (element)=>{
await $hgUW1$writeFile(`elementor-dist/${element.name}/element.js`, await (0, $e571f0f22c90f607$export$a8fc3402335b0b04).clientScript(element));
};
const $16732b027b1a2136$export$6fe40ebe0ac5b555 = async (element)=>{
await $hgUW1$writeFile(`elementor-dist/${element.name}/ssr.js`, await (0, $e571f0f22c90f607$export$a8fc3402335b0b04).ssrScript(element));
};
async function $a38f4d2c79cdbf9e$export$37194dc0fced7a3a(element) {
await $hgUW1$ensureDir(`elementor-dist/${element.name}`);
await (0, $16732b027b1a2136$export$58829bc398d56156)(element);
await (0, $16732b027b1a2136$export$6fe40ebe0ac5b555)(element);
await $a38f4d2c79cdbf9e$var$buildClientScript(element);
await $a38f4d2c79cdbf9e$var$buildSSRBinary(element);
}
async function $a38f4d2c79cdbf9e$var$buildClientScript(element) {
await $a38f4d2c79cdbf9e$var$runViteBuild(`elementor-dist/${element.name}/element.js`, `${element.name}.el.js`);
await $hgUW1$copy(`dist/${element.name}.el.js`, `${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}/assets/${element.name}.el.js`);
}
async function $a38f4d2c79cdbf9e$var$buildSSRBinary(element) {
await $a38f4d2c79cdbf9e$var$runViteBuild(`elementor-dist/${element.name}/ssr.js`, `${element.name}.ssr.js`);
const arch = `node${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).ssrBinaryTarget.node}-${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).ssrBinaryTarget.platform}-${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).ssrBinaryTarget.arch}`;
await $hgUW1$exec([
`dist/${element.name}.ssr.js`,
"-C",
"GZip",
"--target",
arch,
"--output",
`${(0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).pluginNameSlug}/assets/${element.name}.ssr`
]);
}
async function $a38f4d2c79cdbf9e$var$runViteBuild(entry, fileName) {
return $hgUW1$build({
configFile: "vite.config.ts",
build: {
lib: {
entry: entry,
formats: [
"es"
],
fileName: ()=>fileName
}
}
});
}
globalThis.Log = (0, $hgUW1$consola).create({
level: Infinity
});
const $2df9d79b6788b58e$export$f22da7240b7add18 = async ()=>{
await (0, $317c51e7e2b6f5b7$export$c1a4367d4847eb06)();
await (0, $16732b027b1a2136$export$85a63a816292c7c4)();
await (0, $16732b027b1a2136$export$d18bbb32c20ceaa8)();
for (const element of (0, $317c51e7e2b6f5b7$export$1630b5343357e8b5).elements){
await (0, $16732b027b1a2136$export$77d9834716e1c77b)(element);
await (0, $a38f4d2c79cdbf9e$export$37194dc0fced7a3a)(element);
}
await (0, $16732b027b1a2136$export$8bba547025987a4b)();
};
export {$2df9d79b6788b58e$export$f22da7240b7add18 as main};
//# sourceMappingURL=index.mjs.map