mirror of
https://github.com/linuxserver/core.git
synced 2026-02-20 05:07:19 +08:00
228 lines
6.7 KiB
HTML
228 lines
6.7 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<link rel=stylesheet href="../../node_modules/codemirror/lib/codemirror.css">
|
|
<link rel="stylesheet" href="../../node_modules/codemirror/addon/hint/show-hint.css">
|
|
<link rel="stylesheet" href="../../node_modules/codemirror/addon/dialog/dialog.css">
|
|
<link rel="stylesheet" href="../../node_modules/codemirror/addon/tern/tern.css">
|
|
<meta charset="utf-8">
|
|
<link rel=stylesheet href="../docs.css">
|
|
<link rel=stylesheet href="demo.css">
|
|
<title>Tern Demo</title>
|
|
</head>
|
|
<body>
|
|
<!-- load all the junk required for the demo -->
|
|
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
|
|
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/hint/show-hint.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/dialog/dialog.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/tern/tern.js"></script>
|
|
<script src="polyfill.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/search/searchcursor.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/search/search.js"></script>
|
|
<script src="../../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
|
|
<script src="../../node_modules/acorn/dist/acorn.js"></script>
|
|
<script src="../../node_modules/acorn/dist/acorn_loose.js"></script>
|
|
<script src="../../node_modules/acorn/dist/walk.js"></script>
|
|
<script src="../../lib/signal.js"></script>
|
|
<script src="../../lib/tern.js"></script>
|
|
<script src="../../lib/def.js"></script>
|
|
<script src="../../lib/comment.js"></script>
|
|
<script src="../../lib/infer.js"></script>
|
|
<script src="demo.js"></script>
|
|
<script src="../../plugin/modules.js"></script>
|
|
<script src="../../plugin/es_modules.js"></script>
|
|
<script src="../../plugin/requirejs.js"></script>
|
|
<script src="../../plugin/doc_comment.js"></script>
|
|
<script src="../../plugin/complete_strings.js"></script>
|
|
|
|
<div id=top>
|
|
<div id=head>
|
|
<a href="http://ternjs.net" class=title>Tern: <span class=subtitle>Intelligent JavaScript tooling</span>
|
|
</a><a href="index.html">Demo
|
|
</a><a href="../manual.html">Docs
|
|
</a><a href="https://github.com/ternjs/tern">Code</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>Tern demo</h1>
|
|
|
|
<p>This editor is hooked up to Tern. The drop-down in the top right
|
|
corner lists the commands and keyboard shortcuts available. Output and
|
|
function argument hints will appear in the bar below the editor.</p>
|
|
|
|
<div style="position: relative" id="demospace">
|
|
<div id=menus>
|
|
<select id="commands">
|
|
<option>commands...</option>
|
|
<option value=complete>Autocomplete (ctrl-space)</option>
|
|
<option value=jumptodef>Jump to definition (alt-.)</option>
|
|
<option value=finddocs>Describe (ctrl-o)</option>
|
|
<option value=findtype>Find type of (ctrl-i)</option>
|
|
<option value=rename>Rename variable (ctrl-q)</option>
|
|
<option value=addfile>Add a new file</option>
|
|
<option value=delfile>Remove this file</option>
|
|
</select>
|
|
<select id="projects">
|
|
<option>demos...</option>
|
|
</select>
|
|
</div>
|
|
<form id="place"></form>
|
|
</div>
|
|
|
|
<div style="display: none" id="projects">
|
|
<project id="simple"
|
|
data-plugins="doc_comments complete_strings"
|
|
data-libs="ecma5 browser">
|
|
<pre id="test">
|
|
// Use ctrl-space to complete something
|
|
co
|
|
document.body.a
|
|
|
|
// Put the cursor in or after an expression, press ctrl-i to
|
|
// find its type
|
|
|
|
var foo = ["array", "of", "strings"]
|
|
var bar = foo.slice(0, 2).join("").split("a")[0]
|
|
|
|
// Works for locally defined types too.
|
|
|
|
function CTor() { this.size = 10 }
|
|
CTor.prototype.hallo = "hallo"
|
|
|
|
var baz = new CTor
|
|
baz.
|
|
|
|
// You can press ctrl-q when the cursor is on a variable
|
|
// name to rename it. Try it with CTor...
|
|
|
|
// When the cursor is in an argument list, the arguments
|
|
// are shown below the editor.
|
|
|
|
[1].reduce( )
|
|
</pre>
|
|
</project>
|
|
|
|
<project id="requirejs"
|
|
data-plugins="requirejs doc_comments complete_strings"
|
|
data-libs="ecma5 browser jquery">
|
|
<pre id="main.js">
|
|
// A simple set of three modules, connected with requirejs
|
|
|
|
requirejs(["text_util", "output"], function(text, output) {
|
|
window.addEventListener("load", function() {
|
|
// Pressing alt-. on `garble` jumps to the module
|
|
var word = text.capitalize(text.garble(prompt("Hi", "")))
|
|
output.write(word)
|
|
})
|
|
})
|
|
</pre>
|
|
|
|
<pre id="text_util.js">
|
|
// Trivial requirejs-style module
|
|
|
|
define(function() {
|
|
return {
|
|
// Capitalize a string
|
|
capitalize: function(word) {
|
|
return word.charAt(0).toUpperCase() + word.slice(1)
|
|
},
|
|
|
|
// Garble the vowels in a string
|
|
garble: function(word) {
|
|
return word.replace(/[auiyoe]/g, function() {
|
|
return "auiyoe".charAt(Math.floor(Math.random() * 6))
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</pre>
|
|
|
|
<pre id="output.js">
|
|
// This one is written using a multi-module-loader wrapper
|
|
//
|
|
// If Tern's requirejs plugin is loaded, it'll pick up the
|
|
// call to define. Alternatively, when its commonjs plugin
|
|
// is loaded, that'll handle the require calls.
|
|
|
|
(function(root, mod) {
|
|
if (typeof exports == "object" && typeof module == "object")
|
|
mod(exports, require("jquery")) // CommonJS
|
|
else if (typeof define == "function" && define.amd)
|
|
define(["exports", "jquery"], mod) // AMD
|
|
else
|
|
mod(root.output = {}, root.$) // Plain browser env
|
|
})(this, function(exports, $) {
|
|
|
|
// Write some text to the bottom of the document
|
|
exports.write = function(text) {
|
|
$("body").append($("<pre></pre>").text(text))
|
|
}
|
|
|
|
})
|
|
</project>
|
|
|
|
<project id="ES6"
|
|
data-plugins="es_modules doc_comments complete_strings"
|
|
data-libs="ecma5 ecma6">
|
|
<pre id="index.js">
|
|
// Tern can do ECMAScript 6 (2015) too!
|
|
|
|
// Imports and exports work. You can complete module names, and
|
|
// jump to the definition of things defined in modules.
|
|
|
|
// (Press ctrl-. on `List` to jump to the class definition)
|
|
import {List} from "./list"
|
|
|
|
import * as myMath from "./mymath"
|
|
|
|
const l = List.of(3, 4, 5)
|
|
for (let elt of l.map(x => x * 2)) {
|
|
// Tern knows that `elt` is a number!
|
|
let output = myMath.halve(elt)
|
|
console.log(output)
|
|
}
|
|
|
|
// Raw template string
|
|
let raw = String.raw`\n`
|
|
|
|
// Default arguments
|
|
Array.of(1, 2, 3, 4).find(x => x % 3 == 0)
|
|
</pre>
|
|
|
|
<pre id="list.js">
|
|
export class List {
|
|
constructor(head, tail) {
|
|
this.head = head
|
|
this.tail = tail
|
|
}
|
|
|
|
static of(...elements) {
|
|
let result = null
|
|
for (let i = elements.length - 1; i >= 0; i--)
|
|
result = new List(elements[i], result)
|
|
return result
|
|
}
|
|
|
|
map(f) {
|
|
return new List(f(this.head), this.tail && this.tail.map(f))
|
|
}
|
|
|
|
*[Symbol.iterator]() {
|
|
for (let pos = this; pos; pos = pos.tail)
|
|
yield pos.head
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
<pre id="mymath">
|
|
export const PI = 3
|
|
|
|
export const halve = x => x / 2
|
|
</pre>
|
|
|
|
</project>
|
|
|
|
</div>
|
|
|
|
</body>
|