Releases: abhchand/vanilla-tree-viewer
v2.1.1
v2.1.0
Breaking Changes
Old (2.0.0)
Previously, you neeed to call VanillaTreeViewer.renderAll() manually, after the DOM Content loaded:
<script>
document.addEventListener('DOMContentLoaded', function() {
VanillaTreeViewer.renderAll();
}, false);
</script>New (2.1.0)
To make this simpler going forward,
-
renderAll()will correctly handle delaying itself till DOM content has loaded. You no longer need to worry about wrapping it indocument.addEventListener. -
Additionally, we now recommend calling
renderAll()on script load (withonload) so it doesn't have to be called separately as a one-off statement.
Example:
<!-- Note the `onload` call within the `<script>` tag. -->
<script
type="text/javascript"
onload="VanillaTreeViewer.renderAll()"
src="..."
</script>Other Changes
- Add "Wrap Text" Toggle 84d8ac8
v2.0.0
Breaking Changes
v2.0.0 represents a significant departure from the previous API, based on feedback gathered from users using v1.x.
Old (1.x)
Previously, the list of files was specified as a JavaScript Array of file objects. We then initialize VanillaTreeViewer and call render() to render the component instances.
const files = [
{
path: 'foo/bar.js',
url: 'https://example.com/bar.js'
},
// ...
];
new VanillaTreeViewer('my-viewer', files, options).render();New (2.0.0)
The new approach allows us to define the list of files directly in the DOM (as an <ol> element). A new renderAll() static method avoids the need for initializing a new instance:
<body>
<ol class='vtv'>
<li data-path="foo/bar.js" data-url="https://example.com/bar.js">
</li>
</ol>
<script>
document.addEventListener('DOMContentLoaded', function() {
VanillaTreeViewer.renderAll();
}, false);
</script>
</body>See README for more examples and documentation.
Other Changes
- The rendered component is now wrapped in a
divwith.vtvand.vtv-wrapperclasses. (Previously.vtvreferred to an internal element, and is now called.vtv-root) - Internal
highlight.jsdependency has been upgraded from10.4.1->11.3.1 - Case is now preserved on file paths, so
data-path="README.md"is rendered correctly asREADME.mdand notreadme.md - Consistent case is now enforced on path directories. That means listing 2 files with
data-path="/alpha/beta.txt"anddata-path="/ALPHA/gamma.txt"will throw a validation error since/alphais ambiguously defined with two cases. - The header logo link now appends campaign params
Changelog
- Add campaign and update header logo link 2b5560c
- Upgrading
hljsfrom10.4.1->11.3.107bfcdb - Add validation to enforce unambiguous sub-paths 5e3f2fd
- Preserve original case on user-specified
patheab91c4 - [Breaking Change] Parse structure and options from the DOM directly 26f0688
- Use
.vtv-rootinstead of.vtvfor the top level CSS class name 27b5204 - [Breaking Change] Combine global options into file options 017e66f
v1.1.1
v1.1.0
Key Notes
The contents option was added, which adds the ability to specify the file contents inline (instead of specifying a url)
Example:
<script>
const files = [
{
path: 'lib/file.js',
contents: 'const foo = () => {\n alert('foo');\n}',
language: 'javascript'
}
];
new VanillaTreeViewer('some-id', files).render();
</script>Notes:
- At least one of
urlorcontentsmust be specified - This option takes precedence over
urlif both are specified
Changelog
- Add
contentsoption 744f6b5
v1.0.1
v1.0.0
Key Notes
To keep the bundle size as small as possible, we now support a smaller number of languages for syntax highlighting by default (via Highlight.js).
bash, c, cpp, csharp, css, diff, go, java, javascript, json, makefile, xml, markdown, objectivec, php, php-template, plaintext, python, ruby, rust, scss, shell, sql, typescript, yaml
The README provides instructions on how to include other languages.
See the full list of language syntax definitions supported by highlight.js.
Changelog
- Updating to
1.0.0244509d - Correct listed
hljsversion e8530df - Trimming down the number of default languages supported for syntax highlighting a41aaac
- Set
viewportfor mobile view 7eee5cc - Using shorthand
flex-flowproperty b172c9f - Shorten CSS classes from
.vanilla-tree-viewer*to.vtv*dbc793c - General changes to reduce size and add comments 94aae75
- Optimizing SVG icon sizes c2a0960
- Set tree nodes to be the full width of the parent container 836d1ab
- Updating demo image after recent changes c0bad9a
- Remove TravisCI, replace with Circle CI 83f8886
- Separate
yarn run lintandyarn run teste7896dd - Decrease font size and increase line spacing on code blocks f3bf5d3
- Adding binocular logo with link to source repository 4235fd0
- Updating logo 6825927
- Add and configure
prettieras a linter 8f0decf - Bump ssri from 6.0.1 to 6.0.2 50bd403
- Bump elliptic from 6.5.2 to 6.5.4 80e42e3
- Bump ws from 5.2.2 to 5.2.3 6241e45
- Bump url-parse from 1.4.7 to 1.5.3 0122c0c
- Bump tmpl from 1.0.4 to 1.0.5 9aeb692
- Bump path-parse from 1.0.6 to 1.0.7 4d3a9f0
- Bump postcss from 7.0.31 to 7.0.36 92927a6
- Bump dns-packet from 1.3.1 to 1.3.4 d555730
- Bump browserslist from 4.12.0 to 4.16.6 a396691
- Bump hosted-git-info from 2.8.8 to 2.8.9 3bc0bfd
- Bump lodash from 4.17.15 to 4.17.21 8e5d795
- Bump y18n from 4.0.0 to 4.0.1 22eb4ba
- Bump ini from 1.3.5 to 1.3.8 88a899c
- Bump highlight.js from 10.1.1 to 10.4.1 0b4f7a0
- Bump node-fetch from 2.6.0 to 2.6.1 8416fb7
- Bump websocket-extensions from 0.1.3 to 0.1.4 7a98bf4