Merge pull request #21 from Kitware/extend-pure-js-docs

Extend pure js guide

Author: jspanchu

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 docs/.vitepress/dist
 docs/.vitepress/cache
+docs/public/demo/playground
+docs/public/demo/simple-app
 examples/cpp/vtk
 examples/cpp/*/build
 dist

docs/.vitepress/config.mjs

@@ -86,8 +86,10 @@ export default defineConfig({
           text: "For JavaScript developers",
           items: [
             { text: "Getting started", link: "/guide/js/" },
-            { text: "Plain JavaScript", link: "/guide/js/plain" },
-            { text: "Building an application", link: "/guide/js/bundler" },
+            { text: "Working With Objects", link: "/guide/js/objects" },
+            { text: "Observers", link: "/guide/js/observers" },
+            { text: "HTML Script Tag", link: "/guide/js/plain" },
+            { text: "Bundler Integration", link: "/guide/js/bundler" },
           ],
         },
         {

docs/guide/js/bundler.md

@@ -1,4 +1,4 @@
-# Modern JavaScript development
+# Bundler Integration
 
 Modern web development rely on package manager to bring project dependencies. This section covers how published releases can be used within a JavaScript project.
 

docs/guide/js/index.md

@@ -1,25 +1,19 @@
-# VTK.wasm from the JavaScript side
+# VTK.wasm from JavaScript
 
-While VTK is a comprehensive C++ library, WASM is giving us an opportunity to enable it on servers and clients like your browser. 
+This guide focuses on using the VTK WASM bundle from plain JavaScript, requiring no prior C++ knowledge.
 
-In this guide we will focus on how WASM can be used from plain JavaScript without any C++ knowledge and using the WASM bundle generated for our trame needs. 
+## Overview
+Most C++ classes from the [VTK C++ Documentation](https://vtk.org/doc/nightly/html/) are available through a single JavaScript object, which we refer to as the **vtk** namespace.
 
-## Available environment
+Once you have access to the **vtk** namespace (see [Bundler Integration](./bundler.md)), you can interact with VTK classes using standard JavaScript.
 
-Web development has many faces between ESM, UMD and plain script usage. Each path is different to some extent so we will cover each of them in their own guide.
+## The Why
 
-- Plain JavaScript usage
-- Using modern bundler
+VTK is a powerful library with a somewhat steep learning curve, but VTK.wasm allows you to use VTK without needing to learn C++. This can be particularly beneficial for web developers who are already familiar with JavaScript and want to integrate advanced visualization capabilities into their web applications.
 
-## What does it looks like?
-
-Since our WASM bundle is based on our trame needs, it currently mainly focus on the rendering stack (PolyData, Mappers and Actors...) but we plan to extend it with more VTK class coverage down the road. 
-
-So if we ignore how to get your hand on a __vtk__ namespace (see section above), you will be able to write code like below to interact with the available VTK classes in plain JavaScript.
-
-<<< ../../public/demo/example.js
-
-Result:
-
-<iframe src="/vtk-wasm/demo/plain-javascript.html" style="width: 100%; height: 40vh; border: none;"></iframe>
+The following sections will guide you through the essential aspects of using VTK.wasm with JavaScript:
 
+- [Working With Objects](./objects.md)
+- [Observers](./observers.md)
+- [HTML Script Tag](./plain.md)
+- [Bundler Integration](./bundler.md)

docs/guide/js/objects.md

@@ -0,0 +1,5 @@
+# Working With Objects
+
+You can create and manipulate VTK objects using the **vtk** namespace. Here's an example that shows how you can create and manipulate VTK objects in JavaScript:
+
+<iframe src="/vtk-wasm/demo/playground/index.html?example=objects" style="width: 100%; height: 51vh; border: none;"></iframe>

docs/guide/js/observers.md

@@ -0,0 +1,5 @@
+# Observers
+
+Listen to events on an object using the observe method. Remove observers by passing the 'tag' back to `object.unObserve` method.
+
+<iframe src="/vtk-wasm/demo/playground/index.html?example=observers" style="width: 100%; height: 90vh; border: none;" scrolling="no"></iframe>

docs/guide/js/plain.md

@@ -1,4 +1,6 @@
-# Plain JavaScript
+# HTML Script Tag
+
+This guide explains how to use VTK-Wasm directly in an HTML file using a `<script>` tag without a build step.
 
 The following examples rely on loading the `vtk.umd.js` bundle from a CDN. Also to mainly focus on the initialization part, we've externalized the JS/WASM code since that part does not change.