feat: Add playground

Makefile

@@ -1,11 +1,12 @@
 .PHONY: setup
 setup:
-	yarn
 	cargo install wasm-gc
+	(cd web && yarn)
 
 .PHONY: start
 start:
-	yarn start
+	make build_wasm
+	(cd web && yarn start)
 
 .PHONY: test
 test:

src/wasm/main.rs

@@ -34,7 +34,7 @@ pub fn alloc(size: usize) -> *mut c_void {
 }
 
 #[no_mangle]
-pub fn free(ptr: *mut c_void, size: usize) {
+pub fn dealloc(ptr: *mut c_void, size: usize) {
     unsafe {
         let _buf = Vec::from_raw_parts(ptr, 0, size);
     }

web/.gitignore

@@ -0,0 +1,2 @@
+/dist
+/src/monkey.wasm

web/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always"
+}

web/package.json

@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "webpack-serve --hmr false --reload true",
+    "build": "NODE_ENV=production webpack-cli",
+    "format": "prettier 'src/**/*.+(js|css)' --write",
+    "deploy": "gh-pages -d dist",
+    "predeploy": "yarn build"
+  },
+  "author": "tsuyoshiwada",
+  "license": "MIT",
+  "devDependencies": {
+    "codemirror": "^5.39.2",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.0.3",
+    "gh-pages": "^1.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.1",
+    "postcss": "^7.0.1",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.6",
+    "prettier": "^1.13.7",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^3.1.0",
+    "webpack-serve": "^2.0.2"
+  },
+  "dependencies": {
+    "escape-html": "^1.0.3",
+    "lz-string": "^1.4.4"
+  }
+}

web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'cssnano': {},
+  },
+};

web/src/css/base.css

@@ -0,0 +1,27 @@
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  color: var(--color-text-base);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-sans-serif);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+a:hover {
+  text-decoration: none;
+}

web/src/css/components/app.css

@@ -0,0 +1,7 @@
+.app {
+  display: grid;
+  grid-template-rows: 60px calc(100% - 290px) 194px 36px;
+  width: 100vw;
+  min-height: 500px;
+  height: 100vh;
+}

web/src/css/components/button.css

@@ -0,0 +1,66 @@
+.button {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--button-height);
+  margin: 0;
+  border: none;
+  border-radius: var(--button-height);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: bold;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  text-decoration: none;
+  transition: box-shadow 80ms ease-out;
+}
+
+.button:focus {
+  outline: none;
+  box-shadow: var(--color-focus-shadow);
+}
+
+.button x-icon {
+  margin-right: var(--space-2x);
+}
+
+.button--default {
+  padding: 0 var(--space-5x);
+  background: transparent;
+  color: #000;
+}
+
+.button--default::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--button-height);
+  background: rgba(0, 0, 0, 0.07);
+  opacity: 0;
+  transition: all 120ms ease-out;
+  transform: scale(0.9);
+  content: '';
+}
+
+.button--default:hover::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.button--primary {
+  padding: 0 var(--space-8x);
+  background-image: var(--color-primary-gradient);
+  background-color: var(--color-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.16);
+  color: #fff;
+  font-size: var(--font-size-lg);
+}
+
+.button--primary:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+}

web/src/css/components/console.css

@@ -0,0 +1,46 @@
+.console {
+  background: #fff;
+}
+
+.console__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  padding: 0 var(--space-3x);
+  background: #fff;
+  font-size: var(--font-size-sm);
+  font-weight: bold;
+}
+
+.console__title x-icon {
+  margin-right: var(--space-1x);
+}
+
+.console__title time {
+  display: none;
+  color: var(--color-text-light);
+}
+
+.console__body {
+  max-width: 100vw;
+  height: calc(100% - 30px);
+  overflow: auto;
+  letter-spacing: 0.05em;
+}
+
+.console__body pre,
+.console__body code {
+  font-size: inherit;
+  font-family: var(--font-family-code);
+}
+
+.console__body pre {
+  margin: 0;
+  padding: 0 var(--space-3x) var(--space-3x) var(--space-3x);
+}
+
+.console code {
+}

web/src/css/components/editor.css

@@ -0,0 +1,126 @@
+.editor > textarea {
+  display: none;
+}
+
+/* editor styles */
+.CodeMirror {
+  width: 100vw;
+  height: 100%;
+  color: #666;
+  background: var(--color-gray-lighter);
+  font-family: var(--font-family-code);
+  line-height: 1.4;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.CodeMirror-gutters {
+  border-right: none;
+  background: var(--color-gray-light);
+}
+
+.CodeMirror-linenumber {
+  color: #d3d3d3;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #94e8df;
+}
+
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #94e8df;
+}
+
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #94e8df;
+}
+
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #94e8df;
+}
+
+/* `monkey` theme */
+.cm-s-monkey .cm-keyword {
+  color: #708;
+}
+
+.cm-s-monkey .cm-atom {
+  color: #219;
+}
+
+.cm-s-monkey .cm-number {
+  color: #164;
+}
+
+.cm-s-monkey .cm-def {
+  color: #00f;
+}
+
+.cm-s-monkey .cm-variable,
+.cm-s-monkey .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-monkey .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-monkey .cm-variable-3,
+.cm-s-monkey .cm-type {
+  color: #085;
+}
+
+.cm-s-monkey .cm-comment {
+  color: #a50;
+}
+
+.cm-s-monkey .cm-string {
+  color: #a11;
+}
+
+.cm-s-monkey .cm-string-2 {
+  color: #f50;
+}
+
+.cm-s-monkey .cm-meta {
+  color: #555;
+}
+
+.cm-s-monkey .cm-qualifier {
+  color: #555;
+}
+
+.cm-s-monkey .cm-builtin {
+  color: #30a;
+}
+
+.cm-s-monkey .cm-bracket {
+  color: #997;
+}
+
+.cm-s-monkey .cm-tag {
+  color: #170;
+}
+
+.cm-s-monkey .cm-attribute {
+  color: #00c;
+}
+
+.cm-s-monkey .cm-hr {
+  color: #999;
+}
+
+.cm-s-monkey .cm-link {
+  color: #00c;
+}

web/src/css/components/footer.css

@@ -0,0 +1,24 @@
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-3x);
+  border-top: 1px solid var(--color-divider);
+  background: #fff;
+  letter-spacing: 0.02em;
+  color: var(--color-text-light);
+  font-size: var(--font-size-sm);
+}
+
+.footer__repo {
+  margin: 0;
+}
+
+.footer__repo x-icon {
+  margin-right: var(--space-1x);
+}
+
+.footer__copyright span {
+  color: var(--color-primary);
+  font-size: var(--font-size-lg);
+}