Published
Edited
Jun 13, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
more_nested_values.match(dedent(md)`
#### Hey
how ${{ toString: () => "Cool" }}
are you
doing?

- ${1}
- ${"Wow"}
`)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dedent(html)`a`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
interpolate_lines_empty = snapshot.plain()
Insert cell
interpolate_lines_empty.match(interpolated_lines``)
Insert cell
dedent(htl_html)`
<div class="no-span">
<span>
</div>
`
Insert cell
{
return dedent(htl_html)`
<div class="no-span"></div>
`;
}
Insert cell
dedent(htl_html)`
<div class="no-span">
</div>
`
Insert cell
html`<style>
.no-span {
width: 100px;
height: 100px;
background-color: green;
}

span > .no-span {
background-color: red;
}
`
Insert cell
dedent(htl_html)`First line<br />
Second line<br />
Third line
`
Insert cell
Insert cell
Insert cell
identation_per_line = snapshot.plain(2)
Insert cell
identation_per_line.match(get_identation([[" hey"], [" What's up"]]))
Insert cell
Insert cell
tweak_first_and_last_line = (lines, indentation) => {
if (is_empty_line(lines[0])) {
lines = lines.slice(1);
} else {
lines = [
[lines[0][0].padStart(indentation, ' '), ...lines[0].slice(1)],
...lines.slice(1)
];
}

if (is_empty_line(_.last(lines) || '')) {
lines = lines.slice(0, -1);
}
return lines;
}
Insert cell
concat_lines = lines => {
let total = [];
for (let parts_in_line of lines) {
let parts_with_newlines =
parts_in_line === _.last(lines)
? parts_in_line
: [...parts_in_line, "\n"];
for (let part of parts_with_newlines) {
let last_value = _.last(total);
if (typeof part === 'string' && typeof last_value === 'string') {
total[total.length - 1] = last_value + part;
} else {
total.push(part);
}
}
}
return total;
}
Insert cell
Insert cell
dedent = (template_function = String.raw) => (
strings /*: string | Array<string> */,
...values /*: Array<any> */
) => {
return dedent_notebook({ template_function, strings, values });
}
Insert cell
dedent_notebook = notebook({
interpolated_lines,
get_identation,
tweak_first_and_last_line,
concat_lines
})`
template_function = null
strings = null
values = null


lines = interpolated_lines(strings, ...values);
indentation = get_identation(lines);

lines_trimmed = tweak_first_and_last_line(lines_without_identation, indentation);

lines_without_identation = lines.map(
([first_string, ...rest]) => {
return [first_string.slice(indentation), ...rest];
}
);

elements = concat_lines(lines_trimmed);

result = {
let new_strings = [];
let new_values = [];
for (let [string, value] of _.chunk(elements, 2)) {
new_strings.push(string);
if (value) {
new_values.push(value);
}
}
new_strings.raw = new_strings;
return template_function(new_strings, ...new_values);
}
`
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more