Tech Lead at Taktile.
Formerly Firebase, Google
decompilationSuite.test("@variable support", async () => {
const decompiled = await decompile([
{
_name: "v",
_definition: "function _x($variable) {return ($variable);}",
_inputs: [
{
_name: "@variable"
}
]
}
]);
expect(decompiled).toEqual("v = $variable");
})
decompilation_test_results = decompilationResults && report(decompilationSuite)
decompiled_example = {
debugger;
return decompile([decompileVariable]);
}
extractModuleInfo_test_1 = extractModuleInfo(
'async () => runtime.module((await import("/@tomlarkworthy/whisper-input.js?v=4&resolutions=03dda470c56b93ff@4883")).default)'
)
extractModuleInfo_test_2 = extractModuleInfo(
'async () => runtime.module((await import("/d/c2dae147641e012a@46.js?v=4&resolutions=03dda470c56b93ff@4883")).default)'
)
extractModuleInfo_test_3 = extractModuleInfo(
'async () => runtime.module((await import("d/58f3eb7334551ae6@215")).default)'
)
extractModuleInfo_test_4 = extractModuleInfo(
'await import("https://api.observablehq.com/@tomlarkworthy/observable-notes.js?v=4"'
)
decompile = ({ prompt: "fix tests", time: 1726546383668 } &&
async function decompile(variables) {
// Non-import cases
if (!variables || variables.length == 0)
throw new Error("no variables to decompile");
try {
// Import cases
if (
variables[0]._inputs.length == 1 &&
variables[0]._module !== variables[0]._inputs[0]._module
) {
const module_name = findModuleName(
variables[0]._module._scope,
variables[0]._inputs[0]._module
);
const import_aliasses = await Promise.all(
variables.map(async (v) => {
const importedName = await findImportedName(v);
return importedName == v._name
? v._name
: `${importedName} as ${v._name}`;
})
);
return `import {${import_aliasses.join(", ")}} from "${module_name}"`;
}
const variable = variables[0];
const name = variable._name;
const compiled =
typeof variable._definition == "string"
? variable._definition
: variable._definition.toString();
const inputs = variable._inputs.map((i) =>
typeof i == "string" ? i : i._name
);
const wrappedCode = "(" + compiled + ")";
const comments = [],
tokens = [];
let parsed = acorn.parse(wrappedCode, {
ecmaVersion: 2022,
sourceType: "module",
ranges: true,
onComment: comments,
onToken: tokens
});
parsed = escodegen.attachComments(parsed, comments, tokens);
const functionExpression = parsed.body[0].expression;
const body = functionExpression.body;
let varName = name;
let prefix = "";
// Handle special variables
if (name) {
if (name.startsWith("initial ")) {
prefix = "mutable ";
varName = name.replace(/^initial /, "");
} else if (name.startsWith("mutable ")) {
prefix = "mutable ";
varName = name.replace(/^mutable /, "");
} else if (name.startsWith("viewof ")) {
prefix = "viewof ";
varName = name.replace(/^viewof /, "");
}
}
let expression = "";
if (
body.type === "BlockStatement" &&
body.body.length === 1 &&
body.body[0].type === "ReturnStatement" &&
comments.length == 0
) {
// If the body is a single ReturnStatement, decompile its argument
if (wrappedCode[body.body[0].argument.start] == "{") {
// bugfix if the body is an object literal we need to escape it
expression = `(${escodegen.generate(body.body[0].argument, {
comment: true
})})`;
} else {
expression = escodegen.generate(body.body[0].argument, {
comment: true
});
}
} else {
// For other types, decompile the whole body
expression = escodegen.generate(body, { comment: true });
}
let source = `${varName ? `${prefix}${varName} = ` : ""}${expression}`;
// replace mutable and viewofs
let id = 0;
inputs.forEach((input, idx) => {
if (input.startsWith("mutable ")) {
source = source.replaceAll(`$${id++}.value`, input);
} else if (input.startsWith("viewof ")) {
source = source.replaceAll(`$${id++}`, input);
} else if (input == "@variable") {
source = source.replaceAll(`$${id++}`, input);
}
});
return source;
} catch (e) {
debugger;
throw e;
}
})
{
debugger;
return normalizeJavascriptSource(normalizeJavascriptSourceSelector);
}
({ prompt: "Write tests for the compile", time: 1726339624075 } &&
Promise.all(
test_cases.map(({ name, source, variables, normalizeSource }, i) => {
return compilationSuite.test(name || `test-${i}`, async (done) => {
await expect(
normalizeVariables(
await compile(source.value, { anonymousName: `_${i + 2}` })
)
).toEqual(normalizeVariables(variables));
done();
});
})
))
viewof compiled_selector = Inputs.radio(compiled, {
format: (v) => v._name,
value: compiled[0]
})
normalizeVariables(test_case.variables)[0]._definition
compile = ({ prompt: "fix the singleCompileTest", time: 1729232320503 } &&
function compile(source, { anonymousName = "_anonymous" } = {}) {
// Parse the cell using the Observable parser
const comments = [],
tokens = [];
const cell = parser.parseCell(source, {
ranges: true,
onComment: comments,
onToken: tokens
});
let dollarIdx = 0;
const inputToArgMap = {};
const dollarToMacro = {};
// references contain all source references, so expect duplication
const inputs = Array.from(cell.references || []).flatMap((i) => {
if (i.name) {
if (inputToArgMap[i.name]) return [];
inputToArgMap[i.name] = i.name;
return i.name;
} else {
if (inputToArgMap[i.id.name]) return [];
const dollarName = "$" + dollarIdx;
inputToArgMap[i.id.name] = dollarName;
dollarToMacro[dollarName] =
i.type == "ViewExpression"
? "viewof " + i.id.name
: "mutable " + i.id.name;
dollarIdx++;
return dollarName;
}
});
// Determine the function name
let variables;
if (cell.id) {
if (cell.id.type === "Identifier") {
variables = [
{
functionName: "_" + cell.id.name,
name: cell.id.name,
inputs,
params: inputs.join(",")
}
];
} else if (cell.id.type === "ViewExpression") {
variables = [
{
functionName: "_" + cell.id.id.name,
name: "viewof " + cell.id.id.name,
inputs,
params: inputs.join(",")
},
{
functionName: "_" + cell.id.id.name,
name: cell.id.id.name,
_definition: "(G, _) => G.input(_);",
inputs: ["Generators", "viewof " + cell.id.id.name],
params: inputs.join(",")
}
];
} else if (cell.id.type === "MutableExpression") {
variables = [
{
functionName: "_" + cell.id.id.name,
name: "initial " + cell.id.id.name,
inputs,
params: inputs.join(",")
},
{
functionName: "_" + cell.id.id.name,
name: "mutable " + cell.id.id.name,
_definition: "(M, _) => new M(_);",
inputs: ["Mutable", "initial " + cell.id.id.name],
params: inputs.join(",")
},
{
functionName: "_" + cell.id.id.name,
name: cell.id.id.name,
_definition: "_ => _.generator;",
inputs: ["mutable " + cell.id.id.name],
params: inputs.join(",")
}
];
}
} else {
// For anonymous cells
variables = [
{
functionName: anonymousName,
name: null,
inputs,
params: inputs.join(",")
}
];
}
// Generate code for the function body
return variables.map((v) => {
let _definition = v._definition;
if (!_definition) {
let functionBody;
if (cell.body.type === "BlockStatement") {
// For BlockStatement, use the block directly
functionBody = observableToJs(
cell.body,
inputToArgMap,
comments,
tokens
);
} else {
// For other expressions, wrap in return ()
const bodyCode = observableToJs(
cell.body,
inputToArgMap,
comments,
tokens
);
functionBody = `{return (${bodyCode});}`;
}
// Construct the function definition
_definition = `function${cell.generator ? "*" : ""} ${
v.functionName
}(${v.inputs.map((i) => inputToArgMap[i] || i)}) ${functionBody}`;
}
return {
_name: v.name,
_inputs: v.inputs.map(
(i) => dollarToMacro[i] || (i == "$variable" ? "@variable" : i)
),
_definition: _definition
};
});
})
observableToJs = (ast, inputMap, comments, tokens) => {
// Replace ViewExpression with their id so they are removed from
// source and replaced with a JS compatible one
const offset = 0;
acorn_walk.ancestor(
ast,
{
ViewExpression(node, ancestors) {
const reference = "viewof " + node.id.name;
node.type = "Identifier";
node.name = inputMap[node.id.name];
},
MutableExpression(node, ancestors) {
const reference = "mutable " + node.id.name;
node.type = "Identifier";
// hack as ".value" is not valid identifier, but escodegen allows it
node.name = inputMap[node.id.name] + ".value";
}
},
parser.walk
);
escodegen.attachComments(ast, comments, tokens);
const js = escodegen.generate(ast, { comment: true });
return js;
}
ask
api_call_response
//import { footer } from "@tomlarkworthy/footer"
//footer
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.