Created VSCode Extension, some updates from LinkedLives in the field
This commit is contained in:
metacryst
1
README.md
Normal file
1
README.md
Normal file
@@ -0,0 +1 @@
|
||||
PAT for MS Azure: o3tl54vtwzuvahiyu7j6qnkc2fc24dpixr4htycb3dgwwxrijamq
|
||||
BIN
VSCode/.DS_Store
vendored
Normal file
BIN
VSCode/.DS_Store
vendored
Normal file
Binary file not shown.
5
VSCode/.editorconfig
Normal file
5
VSCode/.editorconfig
Normal file
@@ -0,0 +1,5 @@
|
||||
root = true
|
||||
|
||||
[*.{js,json}]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
13
VSCode/.github/FUNDING.yml
vendored
Normal file
13
VSCode/.github/FUNDING.yml
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
|
||||
patreon: # Replace with a single Patreon username
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: 0x00000001A
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
|
||||
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
||||
2
VSCode/.gitignore
vendored
Normal file
2
VSCode/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
key
|
||||
12
VSCode/.vscode/launch.json
vendored
Normal file
12
VSCode/.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"version": "0.1.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Debug extension",
|
||||
"type": "extensionHost",
|
||||
"request": "launch",
|
||||
"runtimeExecutable": "${execPath}",
|
||||
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
3
VSCode/.vscodeignore
Normal file
3
VSCode/.vscodeignore
Normal file
@@ -0,0 +1,3 @@
|
||||
.vscode/**
|
||||
.vscode-test/**
|
||||
.gitignore
|
||||
119
VSCode/CHANGELOG.md
Normal file
119
VSCode/CHANGELOG.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# Changelog
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog] (http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.0.0] - 2018-02-02
|
||||
### Added
|
||||
- Syntax highlighting for html in es6 multiline strings
|
||||
|
||||
## [1.1.0] - 2018-03-08
|
||||
### Fixed
|
||||
- Compatibility with Prettier
|
||||
|
||||
## [1.2.0] - 2018-03-12
|
||||
### Added
|
||||
- Commands and keybindings
|
||||
|
||||
## [1.3.0] - 2018-03-17
|
||||
### Added
|
||||
- Syntax highlight without a comment
|
||||
- Follow semver
|
||||
|
||||
### [1.4.0] - 2018-03-22
|
||||
### Added
|
||||
- JS Syntax highlight
|
||||
- Single-line comment support
|
||||
|
||||
### [1.5.0] - 2018-03-22
|
||||
### Fixed
|
||||
- Compatibility with Prettier
|
||||
|
||||
### [1.6.0] - 2018-08-13
|
||||
### Added
|
||||
- SQL support. Beta
|
||||
|
||||
### [1.7.0] - 2018-08-14
|
||||
### Fixed
|
||||
- Improve html function support
|
||||
|
||||
### [1.7.1] - 2018-08-15
|
||||
### Fixed
|
||||
- Improve single-line comments support
|
||||
- Disable hotkeys
|
||||
|
||||
### [1.8.1] - 2018-08-18
|
||||
### Added
|
||||
- Unquoted attributes support
|
||||
### Fixed
|
||||
- Js-in-attributes support
|
||||
|
||||
### [1.8.2] - 2018-08-19
|
||||
### Fixed
|
||||
- Fix missing `${}` syntax support in sql
|
||||
|
||||
### [1.8.3] - 2018-08-25
|
||||
### Fixed
|
||||
- Fix broken multiline support for jquery
|
||||
|
||||
### [1.8.4] - 2019-01-11
|
||||
### Fixed
|
||||
- Add html text as parameter argument support
|
||||
|
||||
### [1.8.5] - 2019-01-29
|
||||
## Fixed
|
||||
- Highlight html passed directly into a function
|
||||
- Highlight html inside html script
|
||||
- Support for html passed as an argument
|
||||
|
||||
### [1.8.6] - 2019-01-31
|
||||
## Fixed
|
||||
- Improve multiline strings support
|
||||
|
||||
### [1.8.7] - 2019-02-14
|
||||
## Fixed
|
||||
- Fix bug with syntax coloring after keyword, placed inside html template
|
||||
|
||||
### [1.8.8] - 2019-04-12
|
||||
## Improved
|
||||
- Match all caps for SQL (by @thebrodmann)
|
||||
|
||||
### [2.3.0] - 2021-04-23
|
||||
## Improved
|
||||
- Support uppercase /* HTML */
|
||||
|
||||
### [2.4.0] - 2021-04-23
|
||||
## Improved
|
||||
- Support XML
|
||||
|
||||
### [2.5.0] - 2021-04-23
|
||||
## Fixed
|
||||
- Ignore casing
|
||||
|
||||
### [2.6.0] - 2021-04-23
|
||||
## Fixed
|
||||
- Syntax highlighting breaks with multiple placeholders in the same attribute
|
||||
## Improved
|
||||
- Support SVG
|
||||
|
||||
### [2.7.0] - 2021-04-23
|
||||
## Fixed
|
||||
- SQL highlight stops after encountering an identifier delimiter `
|
||||
|
||||
### [2.8.0] - 2021-04-23
|
||||
## Fixed
|
||||
- SQL support for vue files
|
||||
|
||||
### [2.9.0] - 2021-05-18
|
||||
## Improved
|
||||
- CSS support
|
||||
|
||||
### [2.10.0] - 2021-06-03
|
||||
## Improved
|
||||
- GLSL support
|
||||
|
||||
### [2.11.0] - 2021-10-05
|
||||
## Improved
|
||||
- PHP file support
|
||||
21
VSCode/LICENSE
Normal file
21
VSCode/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Tobimori (Victor Novikov)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
94
VSCode/README.md
Normal file
94
VSCode/README.md
Normal file
@@ -0,0 +1,94 @@
|
||||
# Quill
|
||||
For syntax highlighting Quill functions, as well as css and html strings.
|
||||
|
||||
Forked from the below repo. Currently supports everything it does, as well as ```addStyle(``)``` and ```html(``)```.
|
||||
|
||||
|
|
||||
## ES6 String HTML
|
||||
> [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)
|
||||
|
||||
> [Open VSX Registry](https://open-vsx.org/extension/Tobermory/es6-string-html)
|
||||
|
||||
Adds syntax highlight support for code, placed in es6 multiline strings:
|
||||
- HTML (incl. html quoted and unquoted attrs)
|
||||
- SQL
|
||||
- XML
|
||||
- SVG
|
||||
- CSS
|
||||
- GLSL
|
||||
|
||||
## Community
|
||||
- [python-string-sql](https://github.com/ptweir/python-string-sql) - Highlight SQL code in python multiline strings
|
||||
- [es6-string-javascript](https://github.com/Zjcompt/es6-string-javascript) - Highlight JS in multiline strings
|
||||
|
||||
## Contributors
|
||||
[](https://github.com/guycook)
|
||||
[](https://github.com/RobertSasak)
|
||||
[](https://github.com/the-dr-lazy)
|
||||
[](https://github.com/yozman)
|
||||
[](https://github.com/JohnnyLufa)
|
||||
|
||||
## Installation
|
||||
|
||||
- Install `es6-string-html` from extensions (`ctrl + shift + x`)
|
||||
- Or download it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)
|
||||
- Or download it from the [Open VSX Registry](https://open-vsx.org/extension/Tobermory/es6-string-html)
|
||||
|
||||
## Donation
|
||||
|
||||
If you've found this extension useful, you can give me a cup of coffee :)
|
||||
|
||||
[](https://www.buymeacoffee.com/nonholy)
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Simply insert the comment /\*html\*/ or `html` (also works with SQL, SVG, XML, just use the appropriate word) before the string
|
||||
(see Requirements "section" for possible values) or select
|
||||
`Insert es6-string-html comment/template` from the commands menu
|
||||
(`ctrl+shift+p` or `f1`)
|
||||
|
||||
> Tip: Comment in the beginning of es6 string is required
|
||||
|
||||
## Requirements
|
||||
|
||||
- Visual Studio Code v1.19.0 and higher
|
||||
- Comment `/*html*/` before the string. (also works with CSS, SQL, SVG, XML, just use the appropriate word) Possible values:
|
||||
- - `/*css*/`
|
||||
- - `/*html*/`
|
||||
- - `/*inline-html*/`
|
||||
- - `/*template*/`
|
||||
- - `/*inline-template*/`
|
||||
- Or
|
||||
- - `html` before the string
|
||||
|
||||
## Release Notes
|
||||
|
||||
### [...]
|
||||
- See changelog for previous notes
|
||||
|
||||
### [2.7.0] - 2021-04-23
|
||||
## Fixed
|
||||
- SQL highlight stops after encountering an identifier delimiter `
|
||||
|
||||
### [2.8.0] - 2021-04-23
|
||||
## Fixed
|
||||
- SQL support for vue files
|
||||
|
||||
### [2.9.0] - 2021-05-18
|
||||
## Improved
|
||||
- CSS support
|
||||
|
||||
### [2.10.0] - 2021-06-03
|
||||
## Improved
|
||||
- GLSL support
|
||||
|
||||
### [2.11.0] - 2021-10-05
|
||||
## Improved
|
||||
- PHP files support
|
||||
-----------------------------------------------------------------------------------------------------------
|
||||
|
||||
**Enjoy!**
|
||||
BIN
VSCode/docs/Quill.png
Normal file
BIN
VSCode/docs/Quill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
VSCode/docs/demo.png
Normal file
BIN
VSCode/docs/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
2649
VSCode/html.json
Normal file
2649
VSCode/html.json
Normal file
File diff suppressed because one or more lines are too long
5
VSCode/package-lock.json
generated
Normal file
5
VSCode/package-lock.json
generated
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "es6-string-html",
|
||||
"version": "1.0",
|
||||
"lockfileVersion": 1
|
||||
}
|
||||
168
VSCode/package.json
Normal file
168
VSCode/package.json
Normal file
@@ -0,0 +1,168 @@
|
||||
{
|
||||
"name": "quill",
|
||||
"displayName": "Quill",
|
||||
"description": "HTML/CSS Syntax highlighting, best used with the Quill framework",
|
||||
"version": "1.0.0",
|
||||
"publisher": "capturedsun",
|
||||
"icon": "docs/Quill.png",
|
||||
"engines": {
|
||||
"vscode": "^1.19.0"
|
||||
},
|
||||
"galleryBanner": {
|
||||
"color": "#dedede",
|
||||
"theme": "light"
|
||||
},
|
||||
"repository": {
|
||||
"url": "https://github.com/capturedsun/Quill"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/capturedsun/Quill/issues"
|
||||
},
|
||||
"main": "./scripts/main",
|
||||
"categories": [
|
||||
"Programming Languages"
|
||||
],
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"es6",
|
||||
"es6-string-html",
|
||||
"html",
|
||||
"sql",
|
||||
"xml",
|
||||
"svg"
|
||||
],
|
||||
"activationEvents": [
|
||||
"onCommand:quill.insertComment",
|
||||
"onCommand:quill.insertTemplate"
|
||||
],
|
||||
"contributes": {
|
||||
"commands": [
|
||||
{
|
||||
"command": "quill.insertComment",
|
||||
"title": "Insert es6-string-html comment",
|
||||
"category": "HTML"
|
||||
},
|
||||
{
|
||||
"command": "quill.insertTemplate",
|
||||
"title": "Insert es6-string-html template",
|
||||
"category": "HTML"
|
||||
}
|
||||
],
|
||||
"grammars": [
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"source.css",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-css",
|
||||
"path": "./syntaxes/es6-inline-css.json",
|
||||
"embeddedLanguages": {
|
||||
"meta.embedded.block.html": "html"
|
||||
}
|
||||
},
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-glsl",
|
||||
"path": "./syntaxes/es6-inline-glsl.json",
|
||||
"embeddedLanguages": {
|
||||
"meta.embedded.glsl": "glsl"
|
||||
}
|
||||
},
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-xml",
|
||||
"path": "./syntaxes/es6-inline-xml.json",
|
||||
"embeddedLanguages": {
|
||||
"meta.embedded.xml": "xml"
|
||||
}
|
||||
},
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-js-injection",
|
||||
"path": "./syntaxes/es6-js-injection.json"
|
||||
},
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-html",
|
||||
"path": "./syntaxes/es6-inline-html.json"
|
||||
},
|
||||
{
|
||||
"injectTo": [
|
||||
"source.html",
|
||||
"source.js",
|
||||
"source.js.jsx",
|
||||
"source.jsx",
|
||||
"source.ts",
|
||||
"source.tsx",
|
||||
"source.vue",
|
||||
"source.svelte",
|
||||
"source.sql",
|
||||
"text.html"
|
||||
],
|
||||
"scopeName": "inline.es6-sql",
|
||||
"path": "./syntaxes/es6-inline-sql.json",
|
||||
"embeddedLanguages": {
|
||||
"meta.embedded.block.sql": "sql"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"__metadata": {
|
||||
"id": "quill.capturedsun",
|
||||
"publisherId": "capturedsun",
|
||||
"publisherDisplayName": "Captured Sun"
|
||||
}
|
||||
}
|
||||
69
VSCode/scripts/main.js
Normal file
69
VSCode/scripts/main.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
const typeScriptExtensionId = 'vscode.typescript-language-features';
|
||||
const pluginId = 'typescript-lit-html-plugin';
|
||||
const configurationSection = 'lit-html';
|
||||
|
||||
export async function activate(context) {
|
||||
const extension = vscode.extensions.getExtension(typeScriptExtensionId);
|
||||
|
||||
if (!extension) {
|
||||
return;
|
||||
}
|
||||
|
||||
await extension.activate();
|
||||
|
||||
if (!extension.exports || !extension.exports.getAPI) {
|
||||
return;
|
||||
}
|
||||
|
||||
const api = extension.exports.getAPI(0);
|
||||
|
||||
if (!api) {
|
||||
return;
|
||||
}
|
||||
|
||||
vscode.workspace.onDidChangeConfiguration(e => {
|
||||
if (e.affectsConfiguration(configurationSection)) {
|
||||
synchronizeConfiguration(api);
|
||||
}
|
||||
}, undefined, context.subscriptions);
|
||||
|
||||
synchronizeConfiguration(api);
|
||||
}
|
||||
|
||||
function synchronizeConfiguration(api) {
|
||||
api.configurePlugin(pluginId, getConfiguration());
|
||||
}
|
||||
|
||||
function getConfiguration() {
|
||||
const config = vscode.workspace.getConfiguration(configurationSection);
|
||||
const outConfig = {
|
||||
format: {}
|
||||
};
|
||||
|
||||
withConfigValue(config, 'tags', tags => { outConfig.tags = tags; });
|
||||
withConfigValue(config, 'format.enabled', enabled => { outConfig.format.enabled = enabled; });
|
||||
|
||||
return outConfig;
|
||||
}
|
||||
|
||||
function withConfigValue(config, key, withValue) {
|
||||
const configSetting = config.inspect(key);
|
||||
|
||||
if (!configSetting) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make sure the user has actually set the value.
|
||||
// VS Code will return the default values instead of `undefined`, even if user has not don't set anything.
|
||||
if (typeof configSetting.globalValue === 'undefined' && typeof configSetting.workspaceFolderValue === 'undefined' && typeof configSetting.workspaceValue === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const value = config.get(key, undefined);
|
||||
|
||||
if (typeof value !== 'undefined') {
|
||||
withValue(value);
|
||||
}
|
||||
}
|
||||
135
VSCode/syntaxes/es6-inline-css.json
Normal file
135
VSCode/syntaxes/es6-inline-css.json
Normal file
@@ -0,0 +1,135 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string, L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
|
||||
"injections": {
|
||||
"L:source": {
|
||||
"patterns": [
|
||||
{
|
||||
"match": "<",
|
||||
"name": "invalid.illegal.bad-angle-bracket.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(?i)(\\s*(addStyle\\())(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag.html"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.css"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
},
|
||||
{
|
||||
"include": "string.quoted.other.template.js"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s?\\/\\*\\s?(css|inline-css)\\s?\\*\\/\\s?)(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.css"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s*(css|inline-css))(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.css"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
},
|
||||
{
|
||||
"include": "string.quoted.other.template.js"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(css|inline-css)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.line"
|
||||
}
|
||||
},
|
||||
"end": "(`).*",
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(\\G)",
|
||||
"end": "(`)"
|
||||
},
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.css"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(\\${)",
|
||||
"end": "(})",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"endCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-css"
|
||||
}
|
||||
112
VSCode/syntaxes/es6-inline-glsl.json
Normal file
112
VSCode/syntaxes/es6-inline-glsl.json
Normal file
@@ -0,0 +1,112 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string, L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
|
||||
"injections": {
|
||||
"L:source": {
|
||||
"patterns": [
|
||||
{
|
||||
"match": "<",
|
||||
"name": "invalid.illegal.bad-angle-bracket.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(?i)(\\s?\\/\\*\\s?(glsl|inline-glsl)\\s?\\*\\/\\s?)(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.glsl"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s*(glsl|inline-glsl))(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.glsl"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
},
|
||||
{
|
||||
"include": "string.quoted.other.template.js"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(glsl|inline-glsl)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.line"
|
||||
}
|
||||
},
|
||||
"end": "(`).*",
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(\\G)",
|
||||
"end": "(`)"
|
||||
},
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.glsl"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(\\${)",
|
||||
"end": "(})",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"endCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-glsl"
|
||||
}
|
||||
135
VSCode/syntaxes/es6-inline-html.json
Normal file
135
VSCode/syntaxes/es6-inline-html.json
Normal file
@@ -0,0 +1,135 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string, L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
|
||||
"injections": {
|
||||
"L:source": {
|
||||
"patterns": [
|
||||
{
|
||||
"match": "<",
|
||||
"name": "invalid.illegal.bad-angle-bracket.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(?i)(\\s*(html\\())(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag.html"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "text.html.basic"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
},
|
||||
{
|
||||
"include": "string.quoted.other.template.js"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s?\\/\\*\\s?(html|template|inline-html|inline-template)\\s?\\*\\/\\s?)(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "text.html.basic"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s*(html|template|inline-html|inline-template))(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "text.html.basic"
|
||||
},
|
||||
{
|
||||
"include": "inline.es6-htmlx#template"
|
||||
},
|
||||
{
|
||||
"include": "string.quoted.other.template.js"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(html|template|inline-html|inline-template)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.line"
|
||||
}
|
||||
},
|
||||
"end": "(`).*",
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(\\G)",
|
||||
"end": "(`)"
|
||||
},
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "text.html.basic"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(\\${)",
|
||||
"end": "(})",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"endCaptures": {
|
||||
"1": {
|
||||
"name": "entity.name.tag"
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
},
|
||||
{
|
||||
"include": "source.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-html"
|
||||
}
|
||||
78
VSCode/syntaxes/es6-inline-sql.json
Normal file
78
VSCode/syntaxes/es6-inline-sql.json
Normal file
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string, L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
|
||||
"injections": {
|
||||
"L:source": {
|
||||
"patterns": [
|
||||
{
|
||||
"match": "<",
|
||||
"name": "invalid.illegal.bad-angle-bracket.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(?i)(\\s*(sql))(`)",
|
||||
"end": "(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "variable.parameter"
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{ "include": "source.ts#template-substitution-element" },
|
||||
{ "include": "source.ts#string-character-escape" },
|
||||
{ "include": "source.sql" },
|
||||
{ "include": "source.plpgsql.postgres" },
|
||||
{ "match": "." }
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s?\\/?\\*?\\s?(sql|inline-sql)\\s?\\*?\\/?\\s?)(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{ "include": "source.ts#template-substitution-element" },
|
||||
{ "include": "source.ts#string-character-escape" },
|
||||
{ "include": "source.sql" },
|
||||
{ "include": "source.plpgsql.postgres" },
|
||||
{ "match": "." }
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(sql|inline-sql)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.line"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(\\G)",
|
||||
"end": "(`)"
|
||||
},
|
||||
{ "include": "source.ts#template-substitution-element" },
|
||||
{ "include": "source.ts#string-character-escape" },
|
||||
{ "include": "source.sql" },
|
||||
{ "include": "source.plpgsql.postgres" },
|
||||
{ "match": "." }
|
||||
]
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-sql"
|
||||
}
|
||||
72
VSCode/syntaxes/es6-inline-xml.json
Normal file
72
VSCode/syntaxes/es6-inline-xml.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js -comment -string, L:source.js -comment -string, L:source.jsx -comment -string, L:source.js.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
|
||||
"injections": {
|
||||
"L:source": {
|
||||
"patterns": [
|
||||
{
|
||||
"match": "<",
|
||||
"name": "invalid.illegal.bad-angle-bracket.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(?i)(\\s?\\/\\*\\s?(xml|svg|inline-svg|inline-xml)\\s?\\*\\/\\s?)(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "text.xml"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(\\s*(xml|inline-xml))(`)",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.block"
|
||||
}
|
||||
},
|
||||
"end": "(`)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "text.xml"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"begin": "(?i)(?<=\\s|\\,|\\=|\\:|\\(|\\$\\()\\s{0,}(((\\/\\*)|(\\/\\/))\\s?(xml|svg|inline-svg|inline-xml)[ ]{0,1000}\\*?\\/?)[ ]{0,1000}$",
|
||||
"beginCaptures": {
|
||||
"1": {
|
||||
"name": "comment.line"
|
||||
}
|
||||
},
|
||||
"end": "(`).*",
|
||||
"patterns": [
|
||||
{
|
||||
"begin": "(\\G)",
|
||||
"end": "(`)"
|
||||
},
|
||||
{
|
||||
"include": "text.xml"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-xml"
|
||||
}
|
||||
19
VSCode/syntaxes/es6-js-injection.json
Normal file
19
VSCode/syntaxes/es6-js-injection.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"fileTypes": [
|
||||
"js",
|
||||
"jsx",
|
||||
"ts",
|
||||
"tsx",
|
||||
"html",
|
||||
"vue",
|
||||
"svelte",
|
||||
"php"
|
||||
],
|
||||
"injectionSelector": "L:source.js (string.quoted.double.html, string.quoted.single.html), L:source.jsx (string.quoted.double.html, string.quoted.single.html), L:source.js.jsx (string.quoted.double.html, string.quoted.single.html), L:source.ts (string.quoted.double.html, string.quoted.single.html), L:source.tsx (string.quoted.double.html, string.quoted.single.html)",
|
||||
"patterns": [
|
||||
{
|
||||
"include": "source.ts#template-substitution-element"
|
||||
}
|
||||
],
|
||||
"scopeName": "inline.es6-js-injection"
|
||||
}
|
||||
85
VSCode/tests/test.html
Normal file
85
VSCode/tests/test.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.className {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
/**
|
||||
source.css
|
||||
meta.embedded.block.html
|
||||
text.html.derivative
|
||||
*/
|
||||
let variable = /*html*/ `
|
||||
<div attr="${test}asd${test}">Test</div>${Window}
|
||||
`
|
||||
|
||||
variable = /*css*/`
|
||||
.className {
|
||||
color: red;
|
||||
}
|
||||
`
|
||||
|
||||
variable = /*html*/`<div attr="asdasd">Test</div>${window}`
|
||||
|
||||
variable = //html
|
||||
`
|
||||
<div>Test</div>${Window}
|
||||
`
|
||||
|
||||
variable = /*html*/
|
||||
`
|
||||
<div>Test</div>${Window}
|
||||
`
|
||||
|
||||
const fn = (param) => param;
|
||||
const html = (param) => html`<div>Something</div>`
|
||||
fn(//html
|
||||
`<div>Something</div>${window}`
|
||||
)
|
||||
fn(html`<div>OK</div>`)
|
||||
|
||||
variable = /*svg*/`<text x="${test}0" y="0">${elmnt.txt}</text>`
|
||||
|
||||
variable = /*SVG*/`
|
||||
<svg viewBox="0 0 100 100">
|
||||
${myArray.reduce((html, elmnt) => html + /*svg*/`<text x="${test}0" y="0">${elmnt.txt}</text>`, '')}
|
||||
</svg>`
|
||||
|
||||
variable = /*sql*/`SELECT * FROM \`table\` WHERE 1=1`
|
||||
|
||||
variable = /*sql*/
|
||||
`
|
||||
SELECT -- must have whitespace [\s ] after --
|
||||
*,
|
||||
--123, -- double negative is positive!
|
||||
FROM table--syntax error in mysql
|
||||
`
|
||||
|
||||
variable = /*sql*/
|
||||
`
|
||||
SELECT * FROM ${table}
|
||||
WHERE \`test\` NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
|
||||
ORDER BY ProductName;
|
||||
`
|
||||
|
||||
variable = /*XML*/
|
||||
`
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://www.example.com/</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
`
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
VSCode/tests/test.svelte
Normal file
34
VSCode/tests/test.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script>
|
||||
let tests = [
|
||||
/*html*/`<div>OK</div>`,
|
||||
/* INLINE-HTML */ `<div>Test</div>$`,
|
||||
/*css*/`
|
||||
.className {
|
||||
color: red;
|
||||
}
|
||||
`,
|
||||
// html
|
||||
`
|
||||
<div>Test</div>
|
||||
`,
|
||||
/* html */
|
||||
`
|
||||
<div>Test</div>
|
||||
`,
|
||||
/*sql*/
|
||||
`
|
||||
SELECT * FROM test
|
||||
WHERE ProductName NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
|
||||
ORDER BY ProductName;
|
||||
`,
|
||||
/*XML*/
|
||||
`
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://www.example.com/</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
`
|
||||
]
|
||||
</script>
|
||||
57
VSCode/tests/test.vue
Normal file
57
VSCode/tests/test.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
test: /*html*/`<div>OK</div>`,
|
||||
test2() {
|
||||
let variable = /* INLINE-HTML */ `<div>Test</div>${Window}`
|
||||
|
||||
variable = /*css*/`
|
||||
.className {
|
||||
color: red;
|
||||
}
|
||||
`
|
||||
variable = /* html */ `<div>Test</div>${window}`
|
||||
|
||||
variable = // html
|
||||
`
|
||||
<div>Test</div>${Window}
|
||||
`
|
||||
|
||||
variable = /* html */
|
||||
`
|
||||
<div>Test</div>${Window}
|
||||
`
|
||||
|
||||
const fn = (param) => param;
|
||||
const html = (param) => html`<div>Something</div>`
|
||||
fn(//html
|
||||
`<div>Something</div>${window}`
|
||||
)
|
||||
fn(html`<div>OK</div>`)
|
||||
variable = /*sql*/
|
||||
`
|
||||
SELECT * FROM ${table}\`_postfix\`
|
||||
WHERE ProductName NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
|
||||
ORDER BY ProductName;
|
||||
`
|
||||
|
||||
variable = /*XML*/
|
||||
`
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://www.example.com/</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
`
|
||||
},
|
||||
test: 'asdas'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -2,6 +2,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Index</title>
|
||||
<script type="module">
|
||||
import * as quill from 'quill.js';
|
||||
window.quill = {};
|
||||
Object.entries(quill).forEach(([name, exported]) => window.quill[name] = exported);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
6
index.js
6
index.js
@@ -1,7 +1,3 @@
|
||||
import * as dom from './dom.js';
|
||||
window.dom = {};
|
||||
Object.entries(dom).forEach(([name, exported]) => window.dom[name] = exported);
|
||||
|
||||
class Index extends HTMLElement {
|
||||
|
||||
css = /*css*/ `
|
||||
@@ -15,7 +11,7 @@ class Index extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
dom.addStyle(this.css);
|
||||
addStyle(this.css);
|
||||
this.innerHTML = this.html;
|
||||
}
|
||||
|
||||
|
||||
60
navtemplate.js
Normal file
60
navtemplate.js
Normal file
@@ -0,0 +1,60 @@
|
||||
class NavigationIndex extends HTMLElement {
|
||||
urlBeforeChange;
|
||||
|
||||
css = /*css*/ `
|
||||
navigation-index {
|
||||
|
||||
}
|
||||
`
|
||||
|
||||
html = /*html*/ `
|
||||
|
||||
`
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
quill.addStyle(this.css);
|
||||
this.innerHTML = this.html;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.listenForNavigation();
|
||||
}
|
||||
|
||||
listenForNavigation() {
|
||||
let oldPushState = history.pushState;
|
||||
history.pushState = function pushState() {
|
||||
let ret = oldPushState.apply(this, arguments);
|
||||
window.dispatchEvent(new Event('pushstate'));
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
return ret;
|
||||
};
|
||||
|
||||
window.addEventListener('popstate', () => {
|
||||
window.dispatchEvent(new Event('locationchange'));
|
||||
});
|
||||
|
||||
window.addEventListener('locationchange', this.locationChange);
|
||||
|
||||
this.urlBeforeChange = window.location.href;
|
||||
}
|
||||
|
||||
locationChange = async () => {
|
||||
let splitURL = window.location.pathname.split("/");
|
||||
let urlPrefix = splitURL.slice(0, -1).join('/');
|
||||
let urlEnding = splitURL[splitURL.length-1];
|
||||
if(urlEnding === '') {
|
||||
this.innerHTML = this.html;
|
||||
} else {
|
||||
let pascalizedEnding = urlEnding.replace(/(^\w|-\w)/g, (urlEnding) => urlEnding.replace(/-/, "").toUpperCase());
|
||||
import(`.${urlPrefix}/${pascalizedEnding}/${pascalizedEnding}.js`)
|
||||
let htmlTag = urlEnding.includes("-") ? urlEnding : urlEnding + "-wrapper";
|
||||
this.innerHTML = `<${htmlTag}></${htmlTag}>`
|
||||
}
|
||||
this.urlBeforeChange = window.location.href;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
customElements.define('navigation-index', NavigationIndex);
|
||||
export default NavigationIndex;
|
||||
@@ -4,7 +4,7 @@ export function addStyle(cssString) {
|
||||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
|
||||
}
|
||||
|
||||
export function create(elementString) {
|
||||
export function html(elementString) {
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(elementString, 'text/html');
|
||||
return doc.body.firstChild;
|
||||
Reference in New Issue
Block a user