diff --git a/README.md b/README.md index 9cf7ac9..59292e3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,360 @@ -# SimplyCode Dummy Component +# Loading a SimplyCode component into a SimplyCode app -This is a dummy component to see whether/how to load a component from a different repository into an SimplyCode App +[SimplyEdit][1] is a Javascript library that makes it trivial to create webpages +that can be edited by non-technical users. + +In a similar fashion, [SimplyCode][1] is an environment to allow users to create web applications. + +An application in SimplyCode consists of components. Currently, (2024) these components can only be built in SimplyCode directly. + +This project demonstrates how components can be loaded from a different source. + +It consists of two parts: + +1. [A dummy app][3] +2. [A dummy component][3] + +The component is loaded into the app and displayed. + +The generated app can be visited at: https://blog.pother.ca/simplycode-dummy-app/generated.html + +To make this work, changes were made in both the component and the app. + +## Component + +The component was created in SimplyCode and then exported as a JS module. + +The component can be found at: https://blog.pother.ca/simplycode-dummy-component/index.js + +The component was created as follows: + +1.
A component was created with a command and an action + + - Action: + ```js + function (subject) { + return new Promise(function (resolve, reject) { + resolve(`Hello ${subject}`) + }) + } + ``` + - Command: + ```js + function (element) { + simplyApp.actions.sayHello('World').then(message => alert) + } + ``` + - Template: + ```html + + ``` +
+2.
A page was created with a route and HTML page + + - The hello HTML contains a `` + - The route for `/` was set to "hello" +
+3.
The page-frame was changed to output a JS Module + + ```handlebars + export default { + 'componentCss': ` + {{componentCss}} + `, + 'pageCss': ` + {{pageCss}} + `, + 'headHtml': ` + {{headHtml}} + `, + 'bodyHtml': ` + {{bodyHtml}} + `, + 'footHtml': ` + {{footHtml}} + `, + 'componentTemplates': ` + {{componentTemplates}} + `, + 'pageTemplates': ` + {{pageTemplates}} + `, + 'simplyRawApi': { + {{rawApi}} + }, + 'simplyDataApi': { + {{dataApi}} + }, + 'simplyApp': { + 'actions': { + {{actions}} + }, + 'commands': { + {{commands}} + }, + 'routes': { + {{routes}} + } + }, + 'transformers': { + {{transformers}} + }, + 'sorters': { + {{sorters}} + }, + 'dataSources': undefined + {{dataSources}} + } + ``` +
+ +This was all Simplycode compliant, thus a `generated.html` file was created. + +As the component is to be [consumed as ESM][5], it was copied to `index.js`. + +
The final result + +```js +export default { + 'componentCss': ` + `, + 'pageCss': ` + `, + 'headHtml': ` + `, + 'bodyHtml': ` + `, + 'footHtml': ` + `, + 'componentTemplates': ` + + `, + 'pageTemplates': ` + + `, + 'simplyRawApi': {}, + 'simplyDataApi': {}, + 'simplyApp': { + 'actions': { + 'sayHello': function (subject) { + return new Promise(function (resolve, reject) { + resolve(`Hello ${subject}`) + }) + }, + }, + 'commands': { + 'sayHello': function (element) { + simplyApp.actions.sayHello('World').then(message => alert) + }, + }, + 'routes': { + '/': function (params) { + editor.pageData.page = 'hello' + }, + }, + }, + 'transformers': {}, + 'sorters': {}, + 'dataSources': undefined, +} +``` + +
+ +At this point, the repository looks like this: + +``` +. +├── components +│ └── hello +│ ├── actions +│ │ └── sayHello.js +│ ├── commands +│ │ └── sayHello.js +│ ├── componentTemplates +│ │ └── hello.html +│ └── meta.json +├── page-frame +│ ├── componentPreview.html +│ ├── fullApp.html <-- This was changed to output a JS module +│ └── pagePreview.html +├── pages +│ └── hello +│ ├── meta.json +│ ├── pageTemplates +│ │ └── hello.html +│ └── routes +│ ├── home.js +│ └── home.json +├── generated.html +├── index.js <-- This is the generated JS module +└── README.md +``` + +### App + +The app was created in SimplyCode. + +The app can be found at: https://blog.pother.ca/simplycode-dummy-app/generated.html + +The app was created as follows: + +1.
A page was created with a route and HTML page + + - The hello HTML contains a `

This is an App

` + - The route for `/` was set to "home" +
+2.
The page-frame was changed to allow us to prevent SimplyEdit from loading. + + This was done by (ab)using the `data-simply-storage` attribute. + An event listener was added for a custom `simply-import-fired` event. + This event is to be fired once the component is loaded. + ```html + + + ``` +
+3.
Import logic was added to the foot HTML of the application. + + It imports the component and adds the component's templates, actions, and commands to the app. + It then fires the `simply-import-fired` event so SimplyEdit can continue loading. + ```html + + ``` +
+ +After this, the app route was changed from `home` to `hello` to load the component. + +
The final result + +```html + + + + + + + +
+ +
+ + + + + + +``` + +
+ +At this point, the repository looks like this: + +``` +. +├── base-components +│ └── import +│ ├── footHtml +│ │ └── importFoot.html <-- This was changed to import the component +│ └── meta.json +├── generated.html +├── page-frame +│ ├── componentPreview.html <-- This was changed to prevent SimplyEdit from loading +│ ├── fullApp.html +│ └── pagePreview.html +├── pages +│ └── home +│ ├── meta.json +│ ├── pageTemplates +│ │ └── home.html +│ └── routes +│ ├── home.js +│ └── home.json +└── README.md +``` + +[1]: https://simplyedit.io/ +[2]: https://github.com/SimplyEdit/simplycode +[3]: https://github.com/potherca-blog/simplycode-dummy-app +[4]: https://github.com/potherca-blog/simplycode-dummy-component +[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script +[6]: https://blog.pother.ca/simplycode-dummy-component/index.js +[7]: https://blog.pother.ca/simplycode-dummy-app/generated.html