Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New build system (including 3rd party languages) #2312

Merged
merged 42 commits into from
Feb 10, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
d8d2ab6
new build process for brownser/cdn
joshgoebel Oct 15, 2019
9dbdecb
rename rollup build files
joshgoebel Dec 6, 2019
efe4bb7
fix output size logging
joshgoebel Dec 7, 2019
c0b69fb
clean up naming a bit
joshgoebel Dec 7, 2019
025fd9d
build node
joshgoebel Dec 17, 2019
ef6ac11
remove most gear
joshgoebel Dec 17, 2019
faf7eb4
clean and simplify
joshgoebel Dec 17, 2019
6f39619
simplify
joshgoebel Dec 17, 2019
31a5adc
detect 3rd party languages
joshgoebel Dec 18, 2019
75ab819
can run markup tests in 3rd party bundles
joshgoebel Dec 18, 2019
7119fe8
detect tests for 3rd party languages
joshgoebel Dec 19, 2019
6c4559c
push paths down into language metadata tool
joshgoebel Dec 19, 2019
523d05e
wip
joshgoebel Dec 20, 2019
26d06aa
cleanups
joshgoebel Dec 20, 2019
c37e69a
disabled needless auto-detect
joshgoebel Dec 20, 2019
6d9a9cc
clean up node build
joshgoebel Dec 20, 2019
61da578
clean up config
joshgoebel Dec 20, 2019
5df2d5f
remove custom dependency resolution
joshgoebel Dec 20, 2019
cce1afc
cleanup
joshgoebel Dec 20, 2019
ed0511e
allow for new filenames
joshgoebel Dec 21, 2019
03047f0
load the single necessary file, not both
joshgoebel Feb 10, 2020
a9973a3
fixup: export default
joshgoebel Feb 10, 2020
741c9dc
remove old build scripts
joshgoebel Dec 21, 2019
6d39f25
goodbye gear and bluebird
joshgoebel Dec 21, 2019
edbdbab
clean up build config
joshgoebel Dec 22, 2019
595d2b9
add readme and license to CDN build
joshgoebel Dec 23, 2019
bf4b0dd
wip: package CDN distributable for 3rd party languages
joshgoebel Dec 23, 2019
69b91a9
+ support for multi-language 3rd-party packages (#2336)
Jan 1, 2020
b5ad11b
improve abstraction around group ids (:common)
joshgoebel Jan 18, 2020
2face2b
explain what is happening more
joshgoebel Jan 18, 2020
9f60d79
only glob *.js files for languages not any file in that folder
joshgoebel Jan 18, 2020
5a7bdc9
improve naming of build stat variables
joshgoebel Jan 19, 2020
cdf1cd6
clean up our 3rd party build process
joshgoebel Jan 19, 2020
3517bb4
do not allow unknown builds
joshgoebel Jan 19, 2020
f0ea263
CDN embeds no languages vs all if no languages are passed in the list
joshgoebel Jan 19, 2020
de73a00
add docs
joshgoebel Jan 19, 2020
707bff6
change lib/highlight to lib/core for requiring the lib
joshgoebel Jan 19, 2020
551b979
fix reference to authors file
joshgoebel Jan 19, 2020
f5f3a6a
simplify CI
joshgoebel Jan 19, 2020
06b24af
ignore extra
joshgoebel Jan 19, 2020
c833ecb
(chore)package CDN for NPM
joshgoebel Feb 1, 2020
51d89ca
.min now, not .pack
joshgoebel Feb 10, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ __pycache__
node_modules
.project
yarn.lock
extra/

# editors
.idea/
Expand Down
5 changes: 3 additions & 2 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// whole codebase isn't ES8 yet, but our tests and some things are
// whole codebase isn't ES8/9 yet, but our tests and some things are
{
"esversion": 8
"esversion": 9,
"node": true
}
24 changes: 9 additions & 15 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,30 @@ node_js:
- "node"
env:
# we current only test "use strict" for our NPM builds
- TEST_BUILDING_USE_STRICT_BUNDLE=1
- BROWSER=1
- BROWSER=1 NOCOMPRESS=1
- BUILD=node TEST_STRICT_BUNDLE=1
- BUILD=browser
- BUILD=browser NO_MINIFY=1
script:
- |
export BUILD_PARAMS=""
export BUILD_PARAMS="-t $BUILD"

if [ "x$BROWSER" = "x1" ]; then
export BUILD_PARAMS="$BUILD_PARAMS -t browser"
else
export BUILD_PARAMS="$BUILD_PARAMS -t node"
fi

if [ "x$NOCOMPRESS" = "x1" ]; then
if [ "x$NO_MINIFY" = "x1" ]; then
export BUILD_PARAMS="$BUILD_PARAMS -n"
fi

node tools/build.js $BUILD_PARAMS

# test that our build is "use strict" safe for use with packaging
# systems importing our source thru ES6 modules (rollup, etc.)
if [ "x$TEST_BUILDING_USE_STRICT_BUNDLE" = "x1" ]; then
if [ "x$TEST_STRICT_BUNDLE" = "x1" ]; then
./node_modules/.bin/rollup -c test/builds/rollup_import_via_commonjs.js
node build/bundle.js || exit 1
rm build/bundle.js
fi

if [ "x$BROWSER" = "x1" ]; then
npm run test-browser
else
if [ "x$BUILD" = "xnode" ]; then
npm run test
else
npm run test-browser
fi
sudo: false # Use container-based architecture
45 changes: 45 additions & 0 deletions README.CDN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Highlight.js CDN Assets

[![install size](https://packagephobia.now.sh/badge?p=highlight.js)](https://packagephobia.now.sh/result?p=highlight.js)

**This package contains only the CDN build assets of highlight.js.**

This may be what you want if you'd like to install the pre-built distributable highlight.js client-side assets via NPM. If you're wanting to use highlight.js mainly on the server-side you likely want the [highlight.js][1] package instead.

To access these files via CDN:<br>
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/

**If you just want a single .js file with the common languages built-in:
<https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js>**

---

## Highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It works in
the browser as well as on the server. It works with pretty much any
markup, doesn’t depend on any framework, and has automatic language
detection.

If you'd like to read the full README:<br>
<https://github.com/highlightjs/highlight.js/blob/master/README.md>

## License

Highlight.js is released under the BSD License. See [LICENSE][7] file
for details.

## Links

The official site for the library is at <https://highlightjs.org/>.

The Github project may be found at: <https://github.com/highlightjs/highlight.js>

Further in-depth documentation for the API and other topics is at
<http://highlightjs.readthedocs.io/>.

Authors and contributors are listed in the [AUTHORS.txt][8] file.

[1]: https://www.npmjs.com/package/highlight.js
[7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
[8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.txt
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ library along with one of the styles and calling

```html
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script src="/path/to/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```

Expand Down Expand Up @@ -239,7 +239,7 @@ The table below shows the full list of supported languages (and corresponding cl
| Zephir | zephir, zep | |

Languages with the specified package name are defined in separate repositories
and not included in `highlight.pack.js`.
and not included in `highlight.min.js`.
</details>


Expand Down Expand Up @@ -295,7 +295,7 @@ In worker.js:

```js
onmessage = (event) => {
importScripts('<path>/highlight.pack.js');
importScripts('<path>/highlight.min.js');
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
};
Expand All @@ -316,7 +316,7 @@ const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value

```js
// require the highlight.js library without languages
const hljs = require("highlight.js/lib/highlight.js");
const hljs = require("highlight.js/lib/core.js");
// separately require languages
hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
Expand Down Expand Up @@ -373,15 +373,15 @@ import hljs from 'highlight.js';
The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:

```js
import hljs from 'highlight.js/lib/highlight';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
```

To set the syntax highlighting style, if your build tool processes CSS from your JavaScript entry point, you can import the stylesheet directly into your CommonJS-module:

```js
import hljs from 'highlight.js/lib/highlight';
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github.css';
```

Expand Down
12 changes: 6 additions & 6 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,18 @@ <h2>Styles</h2>
<div id="content">

<div id="languages">
<% _.each(blobs, function(blob) { %>
<% var categories = blob.fileInfo.Category; %>
<div <% if(categories) { %>class="<%= categories.join(' ') %>"<% } %>>
<h2><%- blob.fileInfo.Language %></h2>
<pre><code class="<%- path.basename(blob.name, '.js') %>"><%- blob.result %></code></pre>
<% _.each(languages, function(language) { %>
<% var categories = language.categories; %>
<div <% if(categories.length>0) { %>class="<%= categories.join(' ') %>"<% } %>>
<h2><%- language.prettyName %></h2>
<pre><code class="<%- path.basename(language.name, '.js') %>"><%- language.sample %></code></pre>
</div>
<% }); %>
</div>

</div>

<script src="../highlight.pack.js"></script>
<script src="../highlight.min.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="perfect-scrollbar.min.js"></script>
<script src="demo.js"></script>
Expand Down
Empty file added extra/.keep
Empty file.
70 changes: 70 additions & 0 deletions extra/3RD_PARTY_QUICK_START.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
*This is a work in progress. PRs to improve these docs (or the process) would be welcome.*

## Getting Started

So you'd like to create and share you're own language for Highlight.js. That's awesome.

Take a look at some of the real-life examples first:

- https://github.com/highlightjs/highlightjs-cypher
- https://github.com/highlightjs/highlightjs-robots-txt

Basically:

- Checkout highlight-js from github...
- 3rd party languages are placed into the `extra` directory

So if you had a `xzy` language you'd create an `extra/xyz` folder, and that would be your language module. All paths below are relative to that.

- Put your language file in `src/languages/name.js`.
- Add detect tests in `test/detect/`.
- Add markup tests in `test/markup/`.
- Perhaps add a `package.json` for Node.
- Add a nice `README`.
- Don't forget to add a `LICENSE`.


## Testing

To test (detect and markup tests), just build highlight.js and test it. Your tests should be automatically run with the suite:

```
node ./tools/build.js -t node
npm run test
```

If you can't get the auto-detect tests passing you should simply turn off auto-detection for your language in it's definition with `disableAutodetect: true`. Auto-detection is hard.


## Packaging

Users will expect your package to include a minified CDN distributable in your `dist` folder. This should allow them to add the module to their website with only a single `<script>` tag.

Luckily, the highlight.js CDN build process will build this file for you automatically. You can simply commit it to your repo, and done.

```
node ./tools/build.js -t cdn

...
Building extra/highlightjs-xyz/dist/xyz.min.js.
...
```


## Publishing

We're happy to host 3rd party module repos inside the `highlightjs` organization on GitHub. Just file an issue and request a repository.

Publish it to NPM also if you'd like. This will make it much easier for anyone using Node to use it.

When your language module is ready create a PR that adds it to the `README.md` file in the list of languages.


## The Future

More work could be done on:

- Allowing you to ONLY run your own tests, not the whole suite.
- Allowing you to maintain a 3rd party module WITHOUT it being inside of a `highlight-js` checkout (this requires discussion though)
- Simply make some easier tools or scripts to simply the existing process.
- Improving these docs