buiderius integration: module generate-cache

assets/integration/breakdance/modules/generate-cache/main.js

@@ -1,7 +1,7 @@
 /**
  * @module generate-cache 
  * @package WindPress
- * @since 2.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Generate cache when post saved

assets/integration/breakdance/modules/plain-classses/main.js

@@ -1,7 +1,7 @@
 /**
  * @module plain-classes 
  * @package WindPress
- * @since 1.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Add plain classes to the element panel.

assets/integration/bricks/modules/color-palette/main.js

@@ -1,7 +1,7 @@
 /**
  * @module color-palette 
  * @package WindPress
- * @since 1.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Register the color entry to the Bricks' color manager.

assets/integration/bricks/modules/generate-cache/main.js

@@ -1,7 +1,7 @@
 /**
  * @module generate-cache 
  * @package WindPress
- * @since 2.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Generate cache when post saved

assets/integration/bricks/modules/plain-classses/main.js

@@ -1,7 +1,7 @@
 /**
  * @module plain-classes 
  * @package WindPress
- * @since 1.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Add plain classes to the element panel.

assets/integration/bricks/modules/variables/main.js

@@ -1,7 +1,7 @@
 /**
  * @module variables 
  * @package WindPress
- * @since 1.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Register the variables entry to the Bricks' variable manager and preview the variables on hover.

assets/integration/builderius/constant.js

@@ -0,0 +1,19 @@
+// const brx = document.querySelector('.brx-body');
+// const brxGlobalProp = document.querySelector('.brx-body').__vue_app__.config.globalProperties;
+// const brxIframe = document.getElementById('bricks-builder-iframe');
+// const brxIframeGlobalProp = brxIframe.contentDocument.querySelector('.brx-body').__vue_app__.config.globalProperties;
+
+// export {
+//     brx,
+//     brxGlobalProp,
+//     brxIframe,
+//     brxIframeGlobalProp
+// };
+
+const uni = document.getElementById('builderiusPanel');
+const uniIframe = document.getElementById('builderInner');
+
+export {
+    uni,
+    uniIframe
+};

assets/integration/builderius/main.js

@@ -0,0 +1,32 @@
+import { logger } from '@/integration/common/logger.js';
+
+logger('Loading...');
+
+(async () => {
+    // while (!document.querySelector('.brx-body')?.__vue_app__) {
+    //     await new Promise(resolve => setTimeout(resolve, 100));
+    // }
+
+    // while (!document.getElementById('bricks-builder-iframe')?.contentDocument.querySelector('.brx-body')?.__vue_app__) {
+    //     await new Promise(resolve => setTimeout(resolve, 100));
+    // }
+
+
+    while (!document.getElementById('builderInner')?.contentDocument.querySelector('#builderiusBuilder')) {
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    logger('Loading modules...');
+
+    // TODO: dynamic import the features based on the enabled modules
+    // await import('./modules/settings/main.js');
+    // await import('./modules/plain-classses/main.js');
+    // await import('./modules/color-palette/main.js');
+    // await import('./modules/variables/main.js');
+    // await import('./modules/html2bricks/main.js');
+    await import('./modules/generate-cache/main.js');
+    await import('./modules/monaco/main.js');
+    // await import('./modules/variable-picker/main.js');
+
+    logger('Modules loaded!');
+})();

assets/integration/builderius/modules/generate-cache/main.js

@@ -0,0 +1,62 @@
+/**
+ * @module generate-cache 
+ * @package WindPress
+ * @since 3.0.0
+ * @author Joshua Gugun Siagian <suabahasa@gmail.com>
+ * 
+ * Generate cache when post saved
+ */
+
+import { logger } from '@/integration/common/logger';
+
+const channel = new BroadcastChannel('windpress');
+
+(function () {
+    const __xhr = window.XMLHttpRequest;
+    function XMLHttpRequest() {
+
+        const xhr = new __xhr();
+
+        const open = xhr.open;
+
+        xhr.open = function (method, url) {
+            if (method === 'POST' && url.includes('v2/builderius')) {
+                const onreadystatechange = xhr.onreadystatechange;
+
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === 4 && xhr.status === 200) {
+
+                        try {
+                            const response = JSON.parse(xhr.responseText);
+
+                            if (response.commit_entity?.errors?.length === 0 || response.commit_global?.errors?.length === 0) {
+                                channel.postMessage({
+                                    source: 'windpress/integration',
+                                    target: 'windpress/dashboard',
+                                    task: 'windpress.generate-cache',
+                                    payload: {
+                                        force_pull: true
+                                    }
+                                });
+                            }
+                        } catch (err) {
+                            logger('Failed to intercept the response.', err, { module: 'generate-cache' });
+                        }
+                    }
+
+                    if (onreadystatechange) {
+                        onreadystatechange.apply(this, arguments);
+                    }
+                };
+            }
+
+            open.apply(this, arguments);
+        }
+
+        return xhr;
+    }
+
+    window.XMLHttpRequest = XMLHttpRequest;
+}());
+
+logger('Module loaded!', { module: 'generate-cache' });

assets/integration/builderius/modules/monaco/main.js

@@ -0,0 +1,73 @@
+/**
+ * @module monaco
+ * @package WindPress
+ * @since 3.0.0
+ * @author Joshua Gugun Siagian <suabahasa@gmail.com>
+ * 
+ * Register monaco autocompletion
+ */
+
+import { logger } from '@/integration/common/logger';
+import { uniIframe } from '@/integration/builderius/constant.js';
+import { getVariableList } from '@/packages/core/tailwind';
+import { __unstable__loadDesignSystem } from 'tailwindcss';
+
+function naturalExpand(value, total = null) {
+    const length = typeof total === 'number' ? total.toString().length : 8
+    return ('0'.repeat(length) + value).slice(-length)
+}
+
+let main_css = '';
+
+async function updateMainCss() {
+    main_css = await uniIframe.contentWindow.wp.hooks.applyFilters('windpress.module.design_system.main_css');
+}
+
+(async function () {
+    updateMainCss();
+
+    window.Builderius.API.monaco.languages.registerCompletionItemProvider('builderius-css', {
+        provideCompletionItems(model, position) {
+            const wordInfo = model.getWordUntilPosition(position);
+
+            // register variables
+            const variables = getVariableList(__unstable__loadDesignSystem(main_css)).map(entry => {
+                return {
+                    kind: entry.key.includes('--color') ? window.Builderius.API.monaco.languages.CompletionItemKind.Color : window.Builderius.API.monaco.languages.CompletionItemKind.Variable,
+                    label: entry.key,
+                    insertText: entry.key,
+                    detail: entry.value,
+                    range: {
+                        startLineNumber: position.lineNumber,
+                        startColumn: wordInfo.startColumn,
+                        endLineNumber: position.lineNumber,
+                        endColumn: wordInfo.endColumn
+                    },
+                    sortText: naturalExpand(entry.index)
+                }
+            });
+
+            return {
+                suggestions: variables
+            };
+        }
+    });
+
+}());
+
+const channel = new BroadcastChannel('windpress');
+
+channel.addEventListener('message', async (e) => {
+    const data = e.data;
+    const source = 'windpress/autocomplete';
+    const target = 'any';
+    const task = 'windpress.main_css.saved.done';
+
+    if (data.source === source && data.task === task) {
+        setTimeout(() => {
+            updateMainCss();
+        }, 1000);
+    }
+});
+
+logger('Module loaded!', { module: 'generate-cache' });

assets/integration/livecanvas/modules/generate-cache/main.js

@@ -1,7 +1,7 @@
 /**
  * @module generate-cache 
  * @package WindPress
- * @since 2.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Generate cache when post saved

assets/integration/oxygen/editor/modules/generate-cache/main.js

@@ -1,7 +1,7 @@
 /**
  * @module generate-cache 
  * @package WindPress
- * @since 2.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Generate cache when post saved

assets/integration/oxygen/editor/modules/plain-classses/main.js

@@ -1,7 +1,7 @@
 /**
  * @module plain-classes 
  * @package WindPress
- * @since 1.0.0
+ * @since 3.0.0
  * @author Joshua Gugun Siagian <suabahasa@gmail.com>
  * 
  * Add plain classes to the element panel.

constant.php

@@ -14,7 +14,7 @@
 /**
  * Plugin constants.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class WIND_PRESS
 {

src/Core/Cache.php

@@ -18,7 +18,7 @@
 use WindPress\WindPress\Utils\Common;
 
 /**
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Cache
 {

src/Core/Runtime.php

@@ -19,7 +19,7 @@
 use WindPress\WindPress\Utils\Config;
 
 /**
- * @since 1.0.0
+ * @since 3.0.0
  * 
  * TODO: This class is not yet implemented, it's just temporary for Universal Editor testing purpose.
  */

src/Integration/Builderius/Editor.php

@@ -37,6 +37,11 @@ public function editor_assets()
 
         $handle = WIND_PRESS::WP_OPTION . ':integration-builderius-editor';
 
+        AssetVite::get_instance()->enqueue_asset('assets/integration/builderius/main.js', [
+            'handle' => $handle,
+            'in_footer' => true,
+        ]);
+
         wp_register_script($handle, false);
         wp_enqueue_script($handle);
 

src/Plugin.php

@@ -26,7 +26,7 @@
 /**
  * Manage the plugin lifecycle and provides a single point of entry to the plugin.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 final class Plugin
 {

src/Utils/AssetVite.php

@@ -22,7 +22,7 @@
  *
  * @todo Add translation support. Use filter hook
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class AssetVite
 {

src/Utils/Cache.php

@@ -16,7 +16,7 @@
 /**
  * Cache utility functions for the plugin.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Cache
 {

src/Utils/Common.php

@@ -19,7 +19,7 @@
 /**
  * Common utility functions for the plugin.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Common
 {

src/Utils/Config.php

@@ -24,7 +24,7 @@
 /**
  * Accessor for the plugin config.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Config
 {

src/Utils/Debug.php

@@ -19,7 +19,7 @@
 /**
  * Debug tools for the plugin.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Debug
 {

src/Utils/Requirement.php

@@ -18,7 +18,7 @@
 /**
  * Check plugin requirements.
  *
- * @since 1.0.0
+ * @since 3.0.0
  */
 class Requirement
 {

vite.config.js

@@ -34,6 +34,7 @@ export default defineConfig({
                 'integration/oxygen/editor': 'assets/integration/oxygen/editor/main.js',
                 'integration/gutenberg/post-editor': 'assets/integration/gutenberg/post-editor.js',
                 'integration/livecanvas': 'assets/integration/livecanvas/main.js',
+                'integration/builderius': 'assets/integration/builderius/main.js',
             },
             outDir: 'build',
         }),