Update examples (#61)

sakirtemel · web-flow · commit e0f22f175ce7 · 2023-03-06T23:45:34.000+01:00
* Use npm package for examples

* Add second diagram in asciidoc example

* Add file suffix to fix multiple diagrams issue
diff --git a/examples/01-basic/index.html b/examples/01-basic/index.html
@@ -7,12 +7,12 @@
     <!-- Require cheerpj dependency -->
     <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
     <!-- Require PlantUML.js -->
-    <script src="node_modules/@plantuml/plantuml.js/plantuml.js"></script>
+    <script src="node_modules/@sakirtemel/plantuml.js/plantuml.js"></script>
   </head>
   <body>
     <img src="loading.png" id="plantuml-diagram" />
     <script type="text/javascript">
-        plantuml.initialize('/app/node_modules/@plantuml/plantuml.js').then(() => {
+        plantuml.initialize('/app/node_modules/@sakirtemel/plantuml.js').then(() => {
             const element = document.getElementById('plantuml-diagram')
             const pumlContent = `
                 @startuml
diff --git a/examples/01-basic/package-lock.json b/examples/01-basic/package-lock.json
diff --git a/examples/01-basic/package.json b/examples/01-basic/package.json
@@ -10,6 +10,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@plantuml/plantuml.js": "file:../../plantuml-wasm"
+    "@sakirtemel/plantuml.js": "^1.0.0"
   }
 }
diff --git a/examples/02-asciidoctor.js/index.html b/examples/02-asciidoctor.js/index.html
@@ -11,7 +11,7 @@
     <!-- Require cheerpj dependency -->
     <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
     <!-- Require PlantUML.js -->
-    <script src="node_modules/@plantuml/plantuml.js/plantuml.js"></script>
+    <script src="node_modules/@sakirtemel/plantuml.js/plantuml.js"></script>
   </head>
   <body>
     <div id="content"></div>
@@ -60,7 +60,7 @@
         })
 
         // render marked plantuml diagrams
-        plantuml.initialize('/app/node_modules/@plantuml/plantuml.js').then(() => {
+        plantuml.initialize('/app/node_modules/@sakirtemel/plantuml.js').then(() => {
             for(const element of document.querySelectorAll('.plantuml-diagram')){
                 const code = element.querySelector('*:is(code, pre)').innerText
                 const url = plantuml.renderPng(code).then((blob) => {
diff --git a/examples/02-asciidoctor.js/package-lock.json b/examples/02-asciidoctor.js/package-lock.json
diff --git a/examples/02-asciidoctor.js/package.json b/examples/02-asciidoctor.js/package.json
@@ -11,6 +11,6 @@
   "license": "MIT",
   "dependencies": {
     "asciidoctor": "^2.2.6",
-    "@plantuml/plantuml.js": "file:../../plantuml-wasm"
+    "@sakirtemel/plantuml.js": "^1.0.0"
   }
 }
diff --git a/examples/02-asciidoctor.js/sequence-diagram.adoc b/examples/02-asciidoctor.js/sequence-diagram.adoc
@@ -11,6 +11,13 @@ Alice <-- Bob: Another authentication Response
 @enduml
 ----
 
+[source,plantuml]
+----
+@startuml
+Bob -> Alice: Hello!
+@enduml
+----
+
 === Without rendering
 
 [source,plantuml,render=false]
diff --git a/plantuml-wasm/package-lock.json b/plantuml-wasm/package-lock.json
diff --git a/plantuml-wasm/package.json b/plantuml-wasm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakirtemel/plantuml.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "PlantUML that runs completely on javascript without needing java/servers",
   "main": "plantuml.js",
   "scripts": {
diff --git a/plantuml-wasm/plantuml.js b/plantuml-wasm/plantuml.js
@@ -11,14 +11,19 @@ const plantuml = (() => {
 
     const renderPng = (pumlContent) => {
         return new Promise((resolve, reject) => {
-            const renderingStartedAt = new Date()  
-            cjCall("com.plantuml.wasm.v1.Png", "convert", "light", "/files/result.png", pumlContent).then((result) => {
-			    console.log(result);
+            const renderingStartedAt = new Date()
+            const resultFileSuffix = renderingStartedAt.getTime().toString()
+            cjCall("com.plantuml.wasm.v1.Png", "convert", "light", `/files/result-${resultFileSuffix}.png`, pumlContent).then((result) => {
 				const obj = JSON.parse(result);
 				if (obj.status=='ok') {
-					cjFileBlob("result.png").then((blob) => {
-						console.log('Rendering finished in', (new Date()).getTime() - renderingStartedAt.getTime(), 'ms');
-						resolve(blob)        
+					cjFileBlob(`result-${resultFileSuffix}.png`).then((blob) => {
+                        const transaction = cheerpjGetFSMountForPath('/files/').dbConnection.transaction('files', 'readwrite')
+                        transaction.objectStore('files').delete(`/result-${resultFileSuffix}.png`)
+
+                        transaction.oncomplete = () => {
+                            console.log('Rendering finished in', (new Date()).getTime() - renderingStartedAt.getTime(), 'ms');
+                            resolve(blob)
+                        }
 					})
 				}
             })

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,6 @@`
`10`	`10`	`"author": "",`
`11`	`11`	`"license": "MIT",`
`12`	`12`	`"dependencies": {`
`13`		`- "@plantuml/plantuml.js": "file:../../plantuml-wasm"`
	`13`	`+ "@sakirtemel/plantuml.js": "^1.0.0"`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,6 @@`
`11`	`11`	`"license": "MIT",`
`12`	`12`	`"dependencies": {`
`13`	`13`	`"asciidoctor": "^2.2.6",`
`14`		`- "@plantuml/plantuml.js": "file:../../plantuml-wasm"`
	`14`	`+ "@sakirtemel/plantuml.js": "^1.0.0"`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@sakirtemel/plantuml.js",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.0.1",`
`4`	`4`	`"description": "PlantUML that runs completely on javascript without needing java/servers",`
`5`	`5`	`"main": "plantuml.js",`
`6`	`6`	`"scripts": {`