From 384cdfe1dbbdc6ab61a469cad962fb1bf16bff97 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 3 Jan 2021 22:37:53 +0100 Subject: [PATCH] Update component & js guide --- docs/modules/Components-js.md | 62 +++++++++++++++-------------------- 1 file changed, 26 insertions(+), 36 deletions(-) diff --git a/docs/modules/Components-js.md b/docs/modules/Components-js.md index 5638b1fa9..90122604b 100644 --- a/docs/modules/Components-js.md +++ b/docs/modules/Components-js.md @@ -92,7 +92,7 @@ As you see the editor attaches a unique ID to all components with scripts and re Read carefully ::: -Keep in mind that all component scripts are executed inside the iframe of the canvas (isolated, just like your **final template**), and therefore are NOT part of the current `document`. All your external libraries (eg. those load along with the editor) are not there (you'll see later how to manage scripted components with dependencies). +Keep in mind that all component scripts are executed inside the iframe of the canvas (isolated, just like your **final template**), and therefore are NOT part of the current `document`. All your external libraries (eg. those you're loading along with the editor) are not there (you'll see later how to manage components with dependencies). That means **you can't use stuff outside of the function scope**. Take a look at this scenario: @@ -173,30 +173,34 @@ Now, if you try to change traits, you'll also see how the script will be trigger ## Dependencies -As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor. -If you want to make use of external libraries you have two approaches: component-related and template-related. +As we mentioned above, scripts are executed independently inside the canvas, without any dependencies, exactly as the final HTML generated by the editor. +If you want to make use of external libraries you have two approaches: component-related and template-related. ### Component related -If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically. -All you have to do is to require the dependency when it is needed and then call your script. +The component related approach is definitely the best one, as the dependencies will be loaded dynamically and printed in the final HTML only when the component exists in the canvas. +All you have to do is to load your dependencies before executing your initialization script. ```js -... -script: function () { - var el = this; - var initMySLider = function() { - CoolSliderJS.init(el); - } +const script = function(props) { + const initLib = function() { + const el = this; + const myLibOpts = { + prop1: props.myprop1, + prop2: props.myprop2, + }; + someExtLib(el, myLibOpts); + }; - if (typeof CoolSliderJS == 'undefined') { - var script = document.createElement('script'); - script.onload = initMySLider; - script.src = 'https://.../coolslider.min.js'; + if (typeof someExtLib == 'undefined') { + const script = document.createElement('script'); + script.onload = initLib; + script.src = 'https://.../somelib.min.js'; document.body.appendChild(script); + } else { + initLib(); } -}, -... +}; ``` ### Template related @@ -204,31 +208,17 @@ script: function () { A dependency might be used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas: ```js -var editor = grapesjs.init({ +const editor = grapesjs.init({ ... canvas: { - scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'] + scripts: ['https://.../somelib.min.js'], + // The same would be for external styles + styles: ['https://.../ext-style.min.css'], } }); - -... - script: function () { - // Do stuff using jquery - $('...'); - }, -... ``` +Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via `editor.getHtml()`), so it's up to you how to include them in the final page where the final HTML is rendered. - - -## Examples - -Examples of components using scripts inside - -* [grapesjs-navbar](https://github.com/artf/grapesjs-navbar) -* [grapesjs-component-countdown](https://github.com/artf/grapesjs-component-countdown) - - [Traits]: \ No newline at end of file