Skip to content

Commit 7adfb3e

Browse files
author
WebCoder49
committed
Add TypeScript example project
0 parents  commit 7adfb3e

11 files changed

+564
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.js
2+
*js.map

‎.gitmodules

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[submodule "code-input"]
2+
path = code-input
3+
url = https://github.com/WebCoder49/code-input

‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# `code-input` *for TypeScript*
2+
3+
[JavaScript Version](https://github.com/WebCoder49/code-input)
4+
5+
> Fully customisable syntax-highlighted textareas ___with TypeScript Bindings for frontend use___.
6+
7+
![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
8+
9+
## What is this?
10+
This is a repository that houses getting-started materials and demo files for [the `code-input` library](https://github.com/WebCoder49/code-input)'s TypeScript bindings (`.d.ts` files). Here's how to get started with TypeScript and code-input:
11+
### 1. Set up TypeScript
12+
* Install [node.js]().
13+
* Install [NPM Package Manager]().
14+
* In a terminal / command line, type `npm install -g typescript`.
15+
### 2. Set up Code-Input with your project.
16+
* Clone all of the files in this repository into a folder, including the `code-input` library.
17+
* Uncomment one of the demo JS files in the `<head>` of `index.html`.
18+
### 3. Run the project.
19+
* Edit the corresponding demo TypeScript file if wanted.
20+
* Compile the TypeScript with the command: `tsc`
21+
## For descriptions of library functionality, please see [the main `code-input` library](https://github.com/WebCoder49/code-input) or [the TypeScript declaration comments](https://github.com/WebCoder49/code-input/blob/main/code-input.d.ts).

‎builtin-plugins.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Register with built-in plugins; see code-input.js library > plugins folder.
2+
// This requires the plugins' JS files in the same folder to be imported in HTML.
3+
// vvvvvv vvvvvvvvvvvvvv vvvvvvvvvvvv
4+
let builtInPluginTemplate = codeInput.templates.prism(Prism, [new codeInput.plugins.Indent(), new codeInput.plugins.DebounceUpdate(50), new codeInput.plugins.SpecialChars()]);
5+
codeInput.registerTemplate("default", builtInPluginTemplate);

‎code-input

Submodule code-input added at 9a4d636

‎custom-plugin.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* Optional: create a plugin to listen for events in a code-input element
2+
and add custom logic. */
3+
// Look in the developer console to see the logs.
4+
5+
class TestTSPlugin extends codeInput.Plugin {
6+
constructor() {
7+
super(["testattr", "test-*"]);
8+
// Array of observed attributes as parameter
9+
// Wildcard "*" matches any text
10+
}
11+
/* Runs before code is highlighted; Params: codeInput element) */
12+
beforeHighlight(codeInput: codeInput.CodeInput): void {
13+
console.log(codeInput, "TS before highlight");
14+
}
15+
/* Runs after code is highlighted; Params: codeInput element) */
16+
afterHighlight(codeInput: codeInput.CodeInput): void {
17+
console.log(codeInput, "TS after highlight");
18+
}
19+
/* Runs before elements are added into a `code-input`; Params: codeInput element) */
20+
beforeElementsAdded(codeInput: codeInput.CodeInput): void {
21+
console.log(codeInput, "TS before elements added");
22+
}
23+
/* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
24+
afterElementsAdded(codeInput: codeInput.CodeInput): void {
25+
console.log(codeInput, "TS after elements added");
26+
}
27+
/* Runs when an attribute of a `code-input` is changed (you must add the attribute name to the constructor); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
28+
attributeChanged(codeInput: codeInput.CodeInput, name: string, oldValue: string, newValue: string): void {
29+
console.log(codeInput, "TS", name, ":", oldValue, ">", newValue);
30+
}
31+
observedAttributes: Array<string> = ["testattr"]
32+
}
33+
34+
/* Register template with custom plugin: vvvvvvvvvvvv */
35+
let customPluginTemplate = codeInput.templates.prism(Prism, [new TestTSPlugin()]);
36+
codeInput.registerTemplate("default", customPluginTemplate);
37+
38+
window.addEventListener("load", () => {
39+
// Demonstrate attributeChanged callback
40+
setTimeout(() => {
41+
document.querySelector("code-input").setAttribute("testattr", "value1");
42+
}, 1000);
43+
setTimeout(() => {
44+
document.querySelector("code-input").setAttribute("testattr", "value2");
45+
}, 3000);
46+
setTimeout(() => {
47+
document.querySelector("code-input").removeAttribute("testattr");
48+
}, 5000);
49+
50+
// These demonstrate the use of the wildcard in observed attributes.
51+
setTimeout(() => {
52+
document.querySelector("code-input").setAttribute("test-hello", "world");
53+
}, 7000);
54+
setTimeout(() => {
55+
document.querySelector("code-input").setAttribute("test-library", "code-input");
56+
}, 9000);
57+
setTimeout(() => {
58+
document.querySelector("code-input").setAttribute("test-anything", "value");
59+
}, 11000);
60+
});

‎index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Document</title>
5+
6+
<!--Import JS files; configured as TypeScript in tsconfig.json-->
7+
8+
<!--Prism.js-->
9+
<script src="prism/prism.js"></script>
10+
<link rel="stylesheet" href="prism/prism.css">
11+
12+
<!--Code-Input-->
13+
<script src="code-input/code-input.js"></script>
14+
<link rel="stylesheet" href="code-input/code-input.css">
15+
16+
<!--TypeScript, compiled from `.ts` to `.js` with console `tsc`, or equivalent-->
17+
18+
<!-- ☀️ There are three options for demo files: ☀️ -->
19+
20+
<script src="just-register.js"></script>
21+
22+
<!-- <script src="code-input/plugins/debounce-update.js"></script>
23+
<script src="code-input/plugins/indent.js"></script>
24+
<script src="code-input/plugins/special-chars.js"></script>
25+
<script src="builtin-plugins.js"></script> -->
26+
27+
<!-- <script src="custom-plugin.js"></script> -->
28+
29+
<!--Please see the .TS files for more information.-->
30+
</head>
31+
<body>
32+
<p>Please ensure you run <code>tsc</code> in the command line.</p>
33+
<code-input lang="JavaScript" placeholder="Write Some JS!" template="default">console.log("Hello, World!");</code-input>
34+
</body>
35+
</html>

‎just-register.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Register template by itself, so minimal editable, syntax-highlighted textareas work. */
2+
let simpleTemplate = codeInput.templates.prism(Prism, []);
3+
codeInput.registerTemplate("default", simpleTemplate);

‎prism/prism.css

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)