feat: Update web example for Grain 0.4 (#2)

grain-lang · Sep 9, 2021 · 70e5e3c · 70e5e3c
1 parent 084504f
commit 70e5e3c
Show file tree

Hide file tree

Showing 53 changed files with 75 additions and 33,423 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+**/*.gr.wasm
+stdlib/*.md
diff --git a/README.md b/README.md
@@ -4,30 +4,40 @@ This repo contains an example of Grain wasm files running in a browser.
 
 ## Setup
 
-You'll first need to compile the wasm files. The easiest way to do this is to use the Grain cli:
+First, you'll need to install the Grain compiler by following the [Getting Grain](https://grain-lang.org/docs/getting_grain) guide for your operating system.
+
+Additionally, you'll need to install the project dependencies using:
+
+```sh
+npm install
+```
+
+The easiest way to compile your Grain files to WebAssembly is to use the built-in npm script:
 
 ```sh
-grain hello.gr --stdlib=./stdlib
+npm run compile
 ```
 
-This will compile `hello.gr`, `another.gr`, and the necessary stdlib dependencies. Note that I copied Grain's standard library into this project—in the future, the standard library will be available as a consumable package from npm.
+This will compile `hello.gr`, `another.gr`, and the necessary stdlib dependencies.
 
-Run a webserver in this directory. If you have Python 3 on your computer, you can run
+Then, run a webserver in this directory. You can use our other npm script:
 
 ```sh
-python -m http.server
+npm start
 ```
 
-If you visit `localhost:8000` and open your dev console, you should see the hello world messages appear.
+(This script will also compile your project before starting the webserver).
+
+If you visit `localhost:1337` and open your dev console, you should see the hello world messages appear.
 
 ## `index.html` Breakdown
 
 We first load the Grain browser runtime with this script tag:
 
 ```html
-<script src="js/grain-runtime-browser.js"></script>
+<script src="node_modules/@grain/js-runner/dist/grain-runner-browser.js"></script>
 ```
 
-`Grain.buildGrainRunner` takes a locator function as its argument. In this case, we just use the `defaultURLLocator`. As arguments, we pass the locations to look for wasm files—the current URL as the root, and the `stdlib` subdirectory. The default locator will try to find wasm files by first looking in the root of this project, followed by the stdlib directory.
+`Grain.buildGrainRunner` takes a locator function as its argument. In this case, we just use the `defaultURLLocator`. As arguments, we pass the locations to look for wasm files—the current URL as the root, and the `node_modules/@grain/stdlib` subdirectory. The default locator will try to find wasm files by first looking in the root of this project, followed by the stdlib directory.
 
 Once the `GrainRunner` is set up, we call `GrainRunner.runURL` with `hello.wasm`. The locator will then fetch `hello.wasm`, see that it depends on `another.wasm` and `pervasives.wasm`, and load those as well.
diff --git a/favicon.ico b/favicon.ico
diff --git a/hello.gr b/hello.gr
@@ -1,4 +1,4 @@
-import {anotherHello} from './another'
+import { anotherHello } from "./another"
 
-print('Hello, world!')
+print("Hello, world!")
 print(anotherHello)
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <html>
   <head>
-    <script src="js/grain-runtime-browser.js"></script>
+    <script src="node_modules/@grain/js-runner/dist/grain-runner-browser.js"></script>
     <script>
-      let locator = Grain.defaultURLLocator(['/', '/stdlib']);
+      let locator = Grain.defaultURLLocator(['/', 'node_modules/@grain/stdlib']);
       let GrainRunner = Grain.buildGrainRunner(locator);
-      GrainRunner.runURL('hello.wasm');
+      GrainRunner.runURL('hello.gr.wasm');
     </script>
   </head>
 </html>