Kitchen sink example:

import { Kernel } from "@tandem/common";
import { SyntheticWindow, SyntheticDocument } from "@tandem/synthetic-browser";
import {
  Sandbox,
  Dependency,
  FileCacheItem,
  LocalFileSystem,
  DependencyGraph,
  ISyntheticObject,
  LocalFileResolver,
  FileSystemProvider,
  FileEditorProvider,
  FileResolverProvider,
  DependencyGraphProvider,
  ContentEditorFactoryProvider,
  DependencyLoaderFactoryProvider,
} from "@tandem/sandbox";


const kernel = new Kernel(
  new DependencyGraphProvider(),
  new FileEditorProvider(),
  new FileSystemProvider(new LocalFileSystem()),
  new FileResolverProvider(new LocalFileResolver()),
  new DependencyLoaderFactoryProvider("text/css", CSSDependencyLoader),
  new ContentEditorFactoryProvider("text/css", CSSContentEditor),
);

// fetch the dependency graph singleton
const dependencyGraph: DependencyGraph = DependencyGraphProvider.getInstance("webpack", kernel);

const sandbox = new Sandbox(deps, function createGlobal() {

  // global environment context -- browser, node, etc
  return new SyntheticWindow();
});

// create an dependency entry -- all dependencies, and nested dependencies
// be dependency up into this object.
const fileDependency: Dependency = dependencyGraph.getDependency("file:///path/to/local/file.html");

// execute the file dependency. Re-execute if the dependency changes
const fakeDocument: SyntheticDocument = await sandbox.open(fileDependency);

const edit = fakeDocument.body.createEdit().appendChild(fakeDocument.createTextNode("hello world")));

// the synthetic object edit maintains a reference back to the source file -- where it patches changes --
// file:///path/to/local/file.html in this case.
FileEditorProvider.getInstance(deps).applyMutations(...edit.mutations);

Diffing & patching synthetic objects example:

import { SyntheticWindow } from "@tandem/synthetic-browser";
import { SyntheticObjectTreeEditor } from "@tandem/sandbox";

const { document } = new SyntheticWindow();
document.body.innerHTML = `Hello World`;

const documentClone = document.cloneNode(true);
documentClone.body.innerHTML = `Hello Again!`;

// create a diff from a newer node
const edit = document.createEdit().fromDiff(documentClone);

// apply the edit to the original document
new SyntheticObjectTreeEditor(document).applyMutations(...edit.mutations);

// this also works
// edit.applyMutationsTo(document);