Doric add prism style

Android/doric/src/main/java/com/github/penfeizhou/doric/DoricContext.java

@@ -23,6 +23,7 @@ public class DoricContext {
     private final Context mContext;
     private RootNode mRootNode = new RootNode(this);
     private final String source;
+    private String script;
 
     DoricContext(Context context, String contextId, String source) {
         this.mContext = context;
@@ -34,8 +35,13 @@ public class DoricContext {
         return source;
     }
 
+    public String getScript() {
+        return script;
+    }
+
     public static DoricContext create(Context context, String script, String source) {
         DoricContext doricContext = DoricContextManager.getInstance().createContext(context, script, source);
+        doricContext.script = script;
         doricContext.callEntity(DoricConstant.DORIC_ENTITY_CREATE);
         return doricContext;
     }

Android/doric/src/main/java/com/github/penfeizhou/doric/dev/LocalServer.java

@@ -58,6 +58,26 @@ public class LocalServer extends NanoHTTPD {
                 return jsonArray;
             }
         });
+        commandMap.put("context", new APICommand() {
+            @Override
+            public String name() {
+                return "context";
+            }
+
+            @Override
+            public Object exec(IHTTPSession session) {
+                String id = session.getParms().get("id");
+                DoricContext doricContext = DoricContextManager.getContext(id);
+                if (doricContext != null) {
+                    return new JSONBuilder()
+                            .put("id", doricContext.getContextId())
+                            .put("source", doricContext.getSource())
+                            .put("script", doricContext.getScript())
+                            .toJSONObject();
+                }
+                return "{}";
+            }
+        });
     }
 
     private static String getIpAddressString() {

debugger/package-lock.json

@@ -2179,6 +2179,11 @@
         "resolve": "^1.4.0"
       }
     },
+    "babel-plugin-prismjs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz",
+      "integrity": "sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ=="
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -2858,6 +2863,17 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.1.0.tgz",
@@ -3824,6 +3840,12 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -5820,6 +5842,15 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.1",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.1.tgz",
@@ -8796,6 +8827,14 @@
         "utila": "~0.4"
       }
     },
+    "prismjs": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
+      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
@@ -9464,6 +9503,12 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -10489,6 +10534,12 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -11088,6 +11139,14 @@
         }
       }
     },
+    "vue-prism": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vue-prism/-/vue-prism-1.0.5.tgz",
+      "integrity": "sha1-bnd3rbL6EcCoy5ngJlESoQVUlVA=",
+      "requires": {
+        "prismjs": "^1.6.0"
+      }
+    },
     "vue-router": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.2.tgz",

debugger/package.json

@@ -9,9 +9,12 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "babel-plugin-prismjs": "^1.1.1",
     "core-js": "^2.6.5",
     "element-ui": "^2.11.1",
+    "prismjs": "^1.17.1",
     "vue": "^2.6.10",
+    "vue-prism": "^1.0.5",
     "vue-router": "^3.1.2"
   },
   "devDependencies": {

debugger/public/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>Doric Dev Pannel</title>
+  <link href="prism.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -16,6 +17,7 @@
   </noscript>
   <div id="app"></div>
   <!-- built files will be auto injected -->
+  <script src="prism.js"></script>
 </body>
 
 </html>

debugger/public/prism.css

@@ -0,0 +1,229 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-coy&languages=clike+javascript+typescript */
+/**
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
+ * @author Tim  Shedor
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	position: relative;
+	margin: .5em 0;
+	overflow: visible;
+	padding: 0;
+}
+pre[class*="language-"]>code {
+	position: relative;
+	border-left: 10px solid #358ccb;
+	box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+	background-color: #fdfdfd;
+	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+	background-size: 3em 3em;
+	background-origin: content-box;
+	background-attachment: local;
+}
+
+code[class*="language"] {
+	max-height: inherit;
+	height: inherit;
+	padding: 0 1em;
+	display: block;
+	overflow: auto;
+}
+
+/* Margin bottom to accommodate shadow */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: #fdfdfd;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	margin-bottom: 1em;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	position: relative;
+	padding: .2em;
+	border-radius: 0.3em;
+	color: #c92c2c;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	display: inline;
+	white-space: normal;
+}
+
+pre[class*="language-"]:before,
+pre[class*="language-"]:after {
+	content: '';
+	z-index: -2;
+	display: block;
+	position: absolute;
+	bottom: 0.75em;
+	left: 0.18em;
+	width: 40%;
+	height: 20%;
+	max-height: 13em;
+	box-shadow: 0px 13px 8px #979797;
+	-webkit-transform: rotate(-2deg);
+	-moz-transform: rotate(-2deg);
+	-ms-transform: rotate(-2deg);
+	-o-transform: rotate(-2deg);
+	transform: rotate(-2deg);
+}
+
+:not(pre) > code[class*="language-"]:after,
+pre[class*="language-"]:after {
+	right: 0.75em;
+	left: auto;
+	-webkit-transform: rotate(2deg);
+	-moz-transform: rotate(2deg);
+	-ms-transform: rotate(2deg);
+	-o-transform: rotate(2deg);
+	transform: rotate(2deg);
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7D8B99;
+}
+
+.token.punctuation {
+	color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+	color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+	color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+	font-weight: normal;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+@media screen and (max-width: 767px) {
+	pre[class*="language-"]:before,
+	pre[class*="language-"]:after {
+		bottom: 14px;
+		box-shadow: none;
+	}
+
+}
+
+/* Plugin styles */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before {
+	color: #e0d7d1;
+}
+
+/* Plugin styles: Line Numbers */
+pre[class*="language-"].line-numbers.line-numbers {
+	padding-left: 0;
+}
+
+pre[class*="language-"].line-numbers.line-numbers code {
+	padding-left: 3.8em;
+}
+
+pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
+	left: 0;
+}
+
+/* Plugin styles: Line Highlight */
+pre[class*="language-"][data-line] {
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+}
+pre[data-line] code {
+	position: relative;
+	padding-left: 4em;
+}
+pre .line-highlight {
+	margin-top: 0;
+}
+

debugger/src/components/Context.vue

@@ -1,41 +1,94 @@
 <template>
   <div class="context">
-    <el-page-header @back="goBack" v-bind:content="'Context: '+$route.params.id"></el-page-header>
+    <el-page-header @back="goBack"></el-page-header>
-    <el-container>
+    <el-container class="container">
-      <el-aside>
+      <el-aside class="aside">
-        <h3>Context info</h3>
+        <el-card class="box-card">
-        <p>ID:{{$route.params.id}}</p>
+          <div slot="header" class="clearfix">
-        <p>Source:{{$route.params.id}}</p>
+            <span>Context info</span>
+            <el-button @click="debug" style="float: right; padding: 3px 0" type="text">Debug</el-button>
+          </div>
+          <p>
+            ID:
+            <span>{{id}}</span>
+          </p>
+          <p>
+            Source:
+            <span>{{source}}</span>
+          </p>
+        </el-card>
       </el-aside>
+      <el-main>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Running</span>
+          </div>
+          <div class="script">
+            <pre class="language-js"> <code v-html="script"></code></pre>
+          </div>
+        </el-card>
+      </el-main>
     </el-container>
   </div>
 </template>
 
 <script>
+console.log(`ws://${window.location.host}`);
+import axios from "axios";
 export default {
   name: "Context",
+  data: function() {
+    return {
+      id: this.$route.params.id,
+      source: this.$route.params.id,
+      script: ""
+    };
+  },
   methods: {
     goBack() {
       this.$router.go(-1);
+    },
+    debug() {
+      console.log("debug");
     }
+  },
+  mounted: function() {
+    console.log("mounted");
+    axios.get(`/api/context?id=${this.$route.params.id}`).then(res => {
+      this.source = res.data.source;
+      this.script = res.data.script;
+      console.log(this.script);
+    });
+  },
+  updated: function() {
+    Prism.highlightAll();
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
+div {
-  /* margin: 40px 0 0; */
+  font-size: 120%;
 }
-ul {
+
-  list-style-type: none;
+p span {
-  padding: 0;
+  color: #409eff;
 }
-li {
+.context {
-  display: inline-block;
+  font-size: 100%;
-  margin: 0 10px;
 }
-a {
+.container {
-  color: #42b983;
+  margin-top: 30px;
+
+  margin-left: 30px;
+}
+.aside {
+  text-align: left;
+  padding-left: 10px;
+}
+.script {
+  text-align: left;
+  font-size: 50%;
 }
 </style>

debugger/src/components/Home.vue

@@ -44,6 +44,9 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+div {
+  font-size: 200%;
+}
 h3 {
   margin: 40px 0 0;
 }
@@ -56,6 +59,7 @@ li {
   margin: 0 10px;
 }
 a {
+  font-size: 100%;
   color: #42b983;
 }
 </style>