diff --git a/docs/extensions/scripts/com-mojang.md b/docs/extensions/scripts/com-mojang.md index add368e3..16298e6c 100644 --- a/docs/extensions/scripts/com-mojang.md +++ b/docs/extensions/scripts/com-mojang.md @@ -1,7 +1,7 @@ --- title: '@bridge/com-mojang' description: Learn about the @bridge/com-mojang that allows you to access the com.mojang file system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“‚ @bridge/com-mojang diff --git a/docs/extensions/scripts/command-bar.md b/docs/extensions/scripts/command-bar.md index 75a466ea..2a3e905a 100644 --- a/docs/extensions/scripts/command-bar.md +++ b/docs/extensions/scripts/command-bar.md @@ -1,7 +1,7 @@ --- title: '@bridge/command-bar' description: Learn about the @bridge/command-bar... TODO -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“ก @bridge/command-bar diff --git a/docs/extensions/scripts/compare-versions.md b/docs/extensions/scripts/compare-versions.md index 5cfbeb4e..18fb0ab4 100644 --- a/docs/extensions/scripts/compare-versions.md +++ b/docs/extensions/scripts/compare-versions.md @@ -1,7 +1,7 @@ --- title: '@bridge/compare-versions' description: Learn about the @bridge/compare-versions... TODO -sidebar: scripts +sidebar: Scripts --- # ๐Ÿงฉ @bridge/compare-versions diff --git a/docs/extensions/scripts/env.md b/docs/extensions/scripts/env.md index 69f7bf19..9fa6ca9a 100644 --- a/docs/extensions/scripts/env.md +++ b/docs/extensions/scripts/env.md @@ -1,7 +1,7 @@ --- title: '@bridge/env' description: Learn more about @bridge/env, a utility module that provides access to environmental project data. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿž๏ธ @bridge/env diff --git a/docs/extensions/scripts/fetch-definition.md b/docs/extensions/scripts/fetch-definition.md index 88f473e8..1446c786 100644 --- a/docs/extensions/scripts/fetch-definition.md +++ b/docs/extensions/scripts/fetch-definition.md @@ -1,7 +1,7 @@ --- title: '@bridge/fetch-definition' description: Learn more about the @bridge/fetch-definition module which grants access to the lightning cache database. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ”— @bridge/fetch-definition diff --git a/docs/extensions/scripts/fflate.md b/docs/extensions/scripts/fflate.md index ae72f5e1..f4960d8e 100644 --- a/docs/extensions/scripts/fflate.md +++ b/docs/extensions/scripts/fflate.md @@ -1,7 +1,7 @@ --- title: '@bridge/fflate' description: Learn about the @bridge/fflate which allows access to the fflate library. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ’ฝ @bridge/fflate diff --git a/docs/extensions/scripts/fs.md b/docs/extensions/scripts/fs.md index cbfabb87..18202804 100644 --- a/docs/extensions/scripts/fs.md +++ b/docs/extensions/scripts/fs.md @@ -1,7 +1,7 @@ --- title: '@bridge/fs' description: Learn about the @bridge/fs module that allows extensions to interact with the user's file system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“„ @bridge/fs diff --git a/docs/extensions/scripts/globals.md b/docs/extensions/scripts/globals.md index 139c0767..1d2f402c 100644 --- a/docs/extensions/scripts/globals.md +++ b/docs/extensions/scripts/globals.md @@ -1,7 +1,7 @@ --- title: '@bridge/globals' description: Learn about the @bridge/globals module that allows custom components, custom commands and other plugins to access shared data inside of a globals.json file in the project root. -sidebar: scripts +sidebar: Scripts --- # ๐ŸŒ @bridge/globals diff --git a/docs/extensions/scripts/import.md b/docs/extensions/scripts/import.md index 7b59842f..559f0b29 100644 --- a/docs/extensions/scripts/import.md +++ b/docs/extensions/scripts/import.md @@ -1,7 +1,7 @@ --- title: '@bridge/import' description: Learn more about @bridge/import module that allows access to bridge.'s import system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“ฅ @bridge/import diff --git a/docs/extensions/scripts/index.md b/docs/extensions/scripts/index.md index 0ada2127..9d2fb996 100644 --- a/docs/extensions/scripts/index.md +++ b/docs/extensions/scripts/index.md @@ -18,6 +18,7 @@ In this page you will learn the following: :ballot_box_with_check: How to make your very own page and script. ## Basics + Script modules is a collection of JavaScript files and Vue files that can be created within bridge's extension folder or outside of bridge that enable you to develop your own windows, scripts and request bridge to do certain things. Bridge's Script API uses the Vue V2 Engine. It is highly recommended to read the [documentation of the Vue V2 Engine](https://v2.vuejs.org/) to understand how to write and use Vue files. :::warning @@ -27,7 +28,9 @@ To reload extensions go to `Tools > Reload Extensions` after importing your exte ::: ## Creating A Simple Script and Window + ### Setup + Before you begin writing your script and Vue files, you must set up an [extension](/extensions/index.html#creating-extensions) to contain your files. Once you have a valid extension set up in the extension's folder, you can now create two folders named `ui` and `scripts` then create a file called `index.js` inside the `scripts` folder. The `ui` folder will contain your Vue files while the `scripts` folder will contain your JavaScript files. See example setup below. @@ -46,6 +49,7 @@ This is also the same for `scripts` folder where you cannot have any file other ::: ### Writing The UI + Now that we have made the files and folders required we will be adding a button to the sidebar that will open up a sidebar window. To do this we will be using the [@bridge/sidebar](/extensions/scripts/sidebar.html) and [@bridge/ui](/extensions/scripts/ui.html) module inside the `index.js` file. However before we do this we need to setup and import the vue file in the `ui` folder. @@ -62,22 +66,22 @@ Now we need to begin setting up the vue file with the required template and scri ```vue ``` @@ -94,7 +98,7 @@ Now that we have setup the vue file we need to start writing the `index.js` file import { create } from '@bridge/sidebar' import { Home } from '@bridge/ui' /* -See how we are importing Home from @bridge/ui. This means we are importing the vue file Home.vue. +See how we are importing Home from @bridge/ui. This means we are importing the vue file Home.vue. If we were to name the vue file SideBar.vue then we would need to do import { SideBar } from '@bridge/ui' @@ -104,10 +108,10 @@ Then we need to call the function and fill in the paramaters. ```js create({ - id: 'yourId', - displayName: 'Click Me', - icon: 'mdi-apple', - component: Home + id: 'yourId', + displayName: 'Click Me', + icon: 'mdi-apple', + component: Home, }) ``` @@ -124,42 +128,47 @@ Again this may seem a little confusing so lets break it down again. Phew. Now you have made it this far, save your files and then reload your extension by going to **Tools > Reload Extensions**. If everything went correctly you should now see an apple icon on the sidebar if you have used the mdi-apple icon. ## Full Setup Of Tutorial + ### index.js + ```js -import { create } from '@bridge/sidebar'; -import { Home } from '@bridge/ui'; +import { create } from '@bridge/sidebar' +import { Home } from '@bridge/ui' create({ - id: 'yourId', - displayName: 'Click Me', - icon: 'mdi-apple', - component: Home + id: 'yourId', + displayName: 'Click Me', + icon: 'mdi-apple', + component: Home, }) ``` + ### Home.vue + ```vue ``` ### File & Folder Setup + ```txt ๐Ÿ“ extensions โ”œโ”€ ๐Ÿ“ YourExtension @@ -171,4 +180,5 @@ export default { ``` ## Next Steps -This guide only scratches the surface of what is possible with script modules. It is best to look at the [extensions repository on github](https://github.com/bridge-core/plugins) for examples and references when developing your extension or when you want to figure out something. It is best to start simple and get familiar with reading the documentation and understanding how certain things work. \ No newline at end of file + +This guide only scratches the surface of what is possible with script modules. It is best to look at the [extensions repository on github](https://github.com/bridge-core/plugins) for examples and references when developing your extension or when you want to figure out something. It is best to start simple and get familiar with reading the documentation and understanding how certain things work. diff --git a/docs/extensions/scripts/json5.md b/docs/extensions/scripts/json5.md index 85dde34f..f3746fe8 100644 --- a/docs/extensions/scripts/json5.md +++ b/docs/extensions/scripts/json5.md @@ -1,7 +1,7 @@ --- title: '@bridge/json5' description: Learn about the @bridge/json5 module that gives access to json parsing with the json5 npm package. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ—๏ธ @bridge/json5 diff --git a/docs/extensions/scripts/model-viewer.md b/docs/extensions/scripts/model-viewer.md index d374a5b8..6a4eb6e3 100644 --- a/docs/extensions/scripts/model-viewer.md +++ b/docs/extensions/scripts/model-viewer.md @@ -1,7 +1,7 @@ --- title: '@bridge/model-viewer' description: Learn about the @bridge/model-viewer... TODO -sidebar: scripts +sidebar: Scripts --- # ๐Ÿงฑ @bridge/model-viewer diff --git a/docs/extensions/scripts/monaco.md b/docs/extensions/scripts/monaco.md index 58830812..1b5b54d3 100644 --- a/docs/extensions/scripts/monaco.md +++ b/docs/extensions/scripts/monaco.md @@ -1,7 +1,7 @@ --- title: '@bridge/monaco' description: Learn about the @bridge/monaco module that allows you to modify monaco's behaviors. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ”ฉ @bridge/monaco diff --git a/docs/extensions/scripts/notifications.md b/docs/extensions/scripts/notifications.md index ac22d5ec..71982842 100644 --- a/docs/extensions/scripts/notifications.md +++ b/docs/extensions/scripts/notifications.md @@ -1,7 +1,7 @@ --- title: '@bridge/notifications' description: Learn about the @bridge/notification module that allows extensions to create notifications. -sidebar: scripts +sidebar: Scripts --- # โ• @bridge/notification diff --git a/docs/extensions/scripts/path.md b/docs/extensions/scripts/path.md index 8b5bb934..7eb9d3c2 100644 --- a/docs/extensions/scripts/path.md +++ b/docs/extensions/scripts/path.md @@ -1,7 +1,7 @@ --- title: '@bridge/path' description: Learn about the @bridge/path module that gives access to the node 'path' module. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“• @bridge/path diff --git a/docs/extensions/scripts/persistent-storage.md b/docs/extensions/scripts/persistent-storage.md index ae7a22aa..6374afa4 100644 --- a/docs/extensions/scripts/persistent-storage.md +++ b/docs/extensions/scripts/persistent-storage.md @@ -1,7 +1,7 @@ --- title: '@bridge/persistent-storage' description: Learn about the @bridge/persistent-storage module that allows your extension to store data between sessions. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ’พ @bridge/persistent-storage diff --git a/docs/extensions/scripts/project.md b/docs/extensions/scripts/project.md index e2b65082..52af7c66 100644 --- a/docs/extensions/scripts/project.md +++ b/docs/extensions/scripts/project.md @@ -1,7 +1,7 @@ --- title: '@bridge/project' description: Learn about the @bridge/project that allows access to specific functions related to the current project. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿšง @bridge/project diff --git a/docs/extensions/scripts/reactivity.md b/docs/extensions/scripts/reactivity.md index cc13b209..8ba01bae 100644 --- a/docs/extensions/scripts/reactivity.md +++ b/docs/extensions/scripts/reactivity.md @@ -1,7 +1,7 @@ --- title: '@bridge/reactivity' description: Learn about the @bridge/reactivity... TODO -sidebar: scripts +sidebar: Scripts --- # ๐Ÿงจ @bridge/reactivity diff --git a/docs/extensions/scripts/sidebar.md b/docs/extensions/scripts/sidebar.md index c33f753d..72943217 100644 --- a/docs/extensions/scripts/sidebar.md +++ b/docs/extensions/scripts/sidebar.md @@ -1,7 +1,7 @@ --- title: '@bridge/sidebar' description: Learn about the @bridge/sidebar module that allows extensions to create sidebar tabs. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿงญ @bridge/sidebar diff --git a/docs/extensions/scripts/tab-actions.md b/docs/extensions/scripts/tab-actions.md index 5432222a..e50a553a 100644 --- a/docs/extensions/scripts/tab-actions.md +++ b/docs/extensions/scripts/tab-actions.md @@ -1,7 +1,7 @@ --- title: '@bridge/tab-actions' description: Learn more about @bridge/tab-actions module that allows access to bridge.'s tab action system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿƒโ€โ™‚๏ธ @bridge/tab-actions diff --git a/docs/extensions/scripts/tab.md b/docs/extensions/scripts/tab.md index 4b29effc..20a3dea8 100644 --- a/docs/extensions/scripts/tab.md +++ b/docs/extensions/scripts/tab.md @@ -1,7 +1,7 @@ --- title: '@bridge/tab' description: Learn more about @bridge/tab module that allows access to bridge.'s tab system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ“Ž @bridge/tab diff --git a/docs/extensions/scripts/theme.md b/docs/extensions/scripts/theme.md index 2c857a10..1cad800f 100644 --- a/docs/extensions/scripts/theme.md +++ b/docs/extensions/scripts/theme.md @@ -1,7 +1,7 @@ --- title: '@bridge/theme' description: Learn about the @bridge/theme module that allows you to interact with bridge.'s theme system. -sidebar: scripts +sidebar: Scripts --- # ๐ŸŽจ @bridge/theme diff --git a/docs/extensions/scripts/three.md b/docs/extensions/scripts/three.md index 41bec268..397ccb45 100644 --- a/docs/extensions/scripts/three.md +++ b/docs/extensions/scripts/three.md @@ -1,7 +1,7 @@ --- title: '@bridge/three' description: Learn more about @bridge/three module that exposes the threeJS library. -sidebar: scripts +sidebar: Scripts --- # 3๏ธโƒฃ @bridge/three diff --git a/docs/extensions/scripts/toolbar.md b/docs/extensions/scripts/toolbar.md index a47f51e9..ee1203d7 100644 --- a/docs/extensions/scripts/toolbar.md +++ b/docs/extensions/scripts/toolbar.md @@ -1,7 +1,7 @@ --- title: '@bridge/toolbar' description: Learn about the @bridge/toolbar which allows access to bridge's toolbar system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿงฐ @bridge/toolbar diff --git a/docs/extensions/scripts/ui.md b/docs/extensions/scripts/ui.md index 4c9533c2..34595e48 100644 --- a/docs/extensions/scripts/ui.md +++ b/docs/extensions/scripts/ui.md @@ -1,7 +1,7 @@ --- title: '@bridge/ui' description: Learn more about the @bridge/ui module that provides programmatic access to Vue components defined inside of the plugin's ui/ folder. -sidebar: scripts +sidebar: Scripts --- # ๐ŸŽด @bridge/ui diff --git a/docs/extensions/scripts/utils.md b/docs/extensions/scripts/utils.md index b517f352..bfaa3ae5 100644 --- a/docs/extensions/scripts/utils.md +++ b/docs/extensions/scripts/utils.md @@ -1,7 +1,7 @@ --- title: '@bridge/utils' description: Learn more about the @bridge/utils module that provides common functions to developers. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ”ง @bridge/utils diff --git a/docs/extensions/scripts/windows.md b/docs/extensions/scripts/windows.md index 0cff4a4d..52d52cbc 100644 --- a/docs/extensions/scripts/windows.md +++ b/docs/extensions/scripts/windows.md @@ -1,7 +1,7 @@ --- title: '@bridge/windows' description: Learn about the @bridge/windows which allows access to bridge's windows system. -sidebar: scripts +sidebar: Scripts --- # ๐Ÿ  @bridge/windows