{"version":"1.0.0","what-is-a-this-file":"This is a exported Mercury note file. if Do you want use this file, You can download here https://github.com/cloverhearts/mercury/releases","id":"note-24961f2f-f29d-4bea-913c-25e703a178e3","title":"03. Try make a web app on mercury","description":"","paragraphs":[{"parentId":"note-ae0ebb99-cb6b-4e66-9a02-bdd90b20108e","id":"paragraph-b933779d-a788-4852-809e-b832a1571252","title":"New Pragraph 2019-12-31T07:13:36.595Z","content":{"ops":[{"insert":"Mercury can make a web app with code container.\nBasically, Mercury web app render on lit-html library.\nSo, if you want to make complex web app on mercry.\nplease check to document for "},{"attributes":{"link":"https://lit-html.polymer-project.org/"},"insert":"lit-html"},{"insert":"\n\nThis page will explain to the make basic app.\n\n\n\n"},{"insert":{"code-editor-container":"code-editor-container-f726e882-5e5d-4fe5-8f9d-daf94e3b69b4"}},{"insert":"\n\nif you complex this part, simply remember this.\n\n"},{"attributes":{"bold":true},"insert":"HTML = (make html element)"},{"insert":"\n"},{"attributes":{"bold":true},"insert":"REDNER = draw all."},{"insert":"\n\n\nFirst Hello app with javascript\n\n"},{"insert":{"code-editor-container":"code-editor-container-b2647c1c-b47f-447a-862c-807e5ac46c85"}},{"insert":"\nevent also very simple.\n\n"},{"attributes":{"bold":true},"insert":"@click = dom.addEventListener('click', function(){})"},{"insert":"\n\n\n"},{"attributes":{"bold":true,"color":"#e60000"},"insert":"LIMIT"},{"insert":"\n"},{"attributes":{"color":"#e60000"},"insert":"Currently Mercury can't save events about web app events (not html)."},{"insert":"\n"},{"attributes":{"color":"#e60000"},"insert":"Therefore, you must run the code container at least once before you can operate the app normally."},{"insert":"\n"},{"attributes":{"color":"#e60000"},"insert":"This will be fixed soon."},{"insert":"\n\nAnd, Also connect to other code container storage on another code container\n\n"},{"insert":{"code-editor-container":"code-editor-container-a0d3dca3-aea7-407f-be3a-1593af941804"}},{"insert":"\n"}]},"meta":{"config":{},"createdAt":"2019-12-31T07:13:36.594Z","updatedAt":"2019-12-31T07:13:36.595Z","deletedAt":null,"owner":"Anonymous","history":[]},"containers":[{"id":"code-editor-container-f726e882-5e5d-4fe5-8f9d-daf94e3b69b4","language":"javascript","code":"// _mercury.appRender has many lit-html functions.\n\nconst HTML = _mercury.appRender.html\nconst RENDER = _mercury.appRender.render\n\n\n// make a dom and css styles.\nconst header = HTML`<h1 class=\"m-header\">Hello Mercury!</h1>`\nconst cssStyles = HTML`\n    <style>\n        .m-header {\n            color: blue;\n            text-align: center;\n        }\n    </style>\n`\n\n// combine style and header\nconst content = HTML`${cssStyles} ${header} <div style=\"text-align: center;\">Mercury web app!</div>`\n\n// render at app tab\n\nRENDER(content)\n","title":"My first app","logs":[],"meta":{"config":{},"createdAt":"2019-12-31T07:37:20.415Z","updatedAt":"2019-12-31T07:37:20.415Z","deletedAt":null,"owner":"Anonymous","history":[]},"render":{"html":"<!----><!---->\n    <style>\n        .m-header {\n            color: blue;\n            text-align: center;\n        }\n    </style>\n <h1 class=\"m-header\">Hello Mercury!</h1> <div style=\"text-align: center;\">Mercury web app!</div><!---->"},"storage":"undefined"},{"id":"code-editor-container-b2647c1c-b47f-447a-862c-807e5ac46c85","language":"javascript","code":"const HTML = _mercury.appRender.html\nconst RENDER = _mercury.appRender.render\n\nconst header = HTML`<h1>Mercury click game</h1>`\n\n// storage always persist your data in each code container when leave this app.\nthis.storage = this.storage && this.storage.count ? this.storage : { count : 0 }\n\nconst onClick = (e) => {\n    e.preventDefault()\n    this.storage.count += 1\n    RENDER(makeContent())\n}\n\nconst makeContent = () => {\n    // added click event with button\n    const display = HTML`<div style=\"color: red;\">Count ${this.storage.count}</div>`\n    const button = HTML`<button @click=\"${onClick}\">Click ME!</button>`\n    return HTML`${display} ${button}`\n}\n\nRENDER(makeContent())","title":"Persist data and click app","logs":[],"meta":{"config":{},"createdAt":"2019-12-31T07:39:36.128Z","updatedAt":"2019-12-31T07:39:36.129Z","deletedAt":null,"owner":"Anonymous","history":[]},"render":{},"storage":{"count":12}},{"id":"code-editor-container-a0d3dca3-aea7-407f-be3a-1593af941804","language":"javascript","code":"const paragraph = this.parentParagraph\nconst targetContainer = paragraph.containers[1]\nconst storage = targetContainer.storage\nconsole.log(`count is ${storage && storage.count ? storage.count : 'unknown'}`)","title":"Access to storage with another code","logs":[],"meta":{"config":{},"createdAt":"2020-01-05T05:57:03.059Z","updatedAt":"2020-01-05T05:57:03.060Z","deletedAt":null,"owner":"Anonymous","history":[]},"storage":{}}]}],"meta":{"config":{},"createdAt":"2019-12-31T07:13:36.595Z","updatedAt":"2019-12-31T07:13:36.595Z","deletedAt":null,"owner":"Anonymous","history":[]}}