danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-22 15:44:26 -04:00
parent be671003e9
commit 300c873f06
No known key found for this signature in database
5 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
source/assets/js/playground.ts
View File

@ -1,11 +1,12 @@
import { setDiagnostics } from '@codemirror/lint'; /* eslint-disable node/no-extraneous-import */
import { Text } from '@codemirror/state'; import {setDiagnostics} from '@codemirror/lint';
import { EditorView } from 'codemirror'; import {Text} from '@codemirror/state';
import {EditorView} from 'codemirror';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { compileString, info, Logger, OutputStyle, Syntax } from 'sass'; import {compileString, info, Logger, OutputStyle, Syntax} from 'sass';
import { displayForConsoleLog } from './playground/console-utils.js'; import {displayForConsoleLog} from './playground/console-utils.js';
import { editorSetup, outputSetup } from './playground/editor-setup.js'; import {editorSetup, outputSetup} from './playground/editor-setup.js';
import { import {
base64ToState, base64ToState,
errorToDiagnostic, errorToDiagnostic,
@ -50,7 +51,7 @@ function setupPlayground() {
doc: playgroundState.inputValue, doc: playgroundState.inputValue,
extensions: [ extensions: [
...editorSetup, ...editorSetup,
EditorView.updateListener.of((v) => { EditorView.updateListener.of(v => {
if (v.docChanged) { if (v.docChanged) {
playgroundState.inputValue = editor.state.doc.toString(); playgroundState.inputValue = editor.state.doc.toString();
} }
@ -94,7 +95,7 @@ function setupPlayground() {
} }
} }
const options = document.querySelectorAll('[data-value]'); const options = document.querySelectorAll('[data-value]');
Array.from(options).forEach((option) => { Array.from(options).forEach(option => {
option.addEventListener('click', clickHandler); option.addEventListener('click', clickHandler);
}); });
@ -120,24 +121,24 @@ function setupPlayground() {
*/ */
function updateButtonState() { function updateButtonState() {
const inputFormatTab = document.querySelector( const inputFormatTab = document.querySelector(
'[data-setting="inputFormat"]', '[data-setting="inputFormat"]'
) as HTMLDivElement; ) as HTMLDivElement;
const inputButtons = inputFormatTab.querySelectorAll('[data-value]'); const inputButtons = inputFormatTab.querySelectorAll('[data-value]');
inputButtons.forEach((button) => { inputButtons.forEach(button => {
if (!(button instanceof HTMLButtonElement)) return; if (!(button instanceof HTMLButtonElement)) return;
button.dataset.active = String( button.dataset.active = String(
button.dataset.value === playgroundState.inputFormat, button.dataset.value === playgroundState.inputFormat
); );
}); });
const outputFormatTab = document.querySelector( const outputFormatTab = document.querySelector(
'[data-setting="outputFormat"]', '[data-setting="outputFormat"]'
) as HTMLDivElement; ) as HTMLDivElement;
const outputButtons = outputFormatTab.querySelectorAll('[data-value]'); const outputButtons = outputFormatTab.querySelectorAll('[data-value]');
outputButtons.forEach((button) => { outputButtons.forEach(button => {
if (!(button instanceof HTMLButtonElement)) return; if (!(button instanceof HTMLButtonElement)) return;
button.dataset.active = String( button.dataset.active = String(
button.dataset.value === playgroundState.outputFormat, button.dataset.value === playgroundState.outputFormat
); );
}); });
} }
@ -149,7 +150,7 @@ function setupPlayground() {
*/ */
function updateErrorState() { function updateErrorState() {
const editorWrapper = document.querySelector( const editorWrapper = document.querySelector(
'[data-compiler-has-error]', '[data-compiler-has-error]'
) as HTMLDivElement; ) as HTMLDivElement;
editorWrapper.dataset.compilerHasError = editorWrapper.dataset.compilerHasError =
playgroundState.compilerHasError.toString(); playgroundState.compilerHasError.toString();
@ -164,7 +165,7 @@ function setupPlayground() {
*/ */
function updateDebugOutput() { function updateDebugOutput() {
const console = document.querySelector( const console = document.querySelector(
'.sl-c-playground__console', '.sl-c-playground__console'
) as HTMLDivElement; ) as HTMLDivElement;
console.innerHTML = playgroundState.debugOutput console.innerHTML = playgroundState.debugOutput
.map(displayForConsoleLog) .map(displayForConsoleLog)
@ -192,7 +193,7 @@ function setupPlayground() {
playgroundState.compilerHasError = true; playgroundState.compilerHasError = true;
playgroundState.debugOutput = [ playgroundState.debugOutput = [
...playgroundState.debugOutput, ...playgroundState.debugOutput,
{ type: 'error', error: result.error }, {type: 'error', error: result.error},
]; ];
} }
updateDebugOutput(); updateDebugOutput();
@ -203,13 +204,13 @@ function setupPlayground() {
warn(message, options) { warn(message, options) {
playgroundState.debugOutput = [ playgroundState.debugOutput = [
...playgroundState.debugOutput, ...playgroundState.debugOutput,
{ message, options, type: 'warn' }, {message, options, type: 'warn'},
]; ];
}, },
debug(message, options) { debug(message, options) {
playgroundState.debugOutput = [ playgroundState.debugOutput = [
...playgroundState.debugOutput, ...playgroundState.debugOutput,
{ message, options, type: 'debug' }, {message, options, type: 'debug'},
]; ];
}, },
}; };
@ -221,9 +222,9 @@ function setupPlayground() {
style: playgroundState.outputFormat, style: playgroundState.outputFormat,
logger: logger, logger: logger,
}); });
return { css: result.css }; return {css: result.css};
} catch (error) { } catch (error) {
return { error }; return {error};
} }
} }
@ -235,7 +236,7 @@ function setupPlayground() {
function updateSassVersion() { function updateSassVersion() {
const version = info.split('\t')[1]; const version = info.split('\t')[1];
const versionSpan = document.querySelector( const versionSpan = document.querySelector(
'.sl-c-playground__tabbar-version', '.sl-c-playground__tabbar-version'
) as HTMLSpanElement; ) as HTMLSpanElement;
versionSpan.innerText = `v${version}`; versionSpan.innerText = `v${version}`;
} }

6
source/assets/js/playground/console-utils.ts
View File

@ -1,4 +1,4 @@
import { Exception, SourceSpan } from 'sass'; import {Exception, SourceSpan} from 'sass';
type ConsoleLogDebug = { type ConsoleLogDebug = {
options: { options: {
@ -46,7 +46,7 @@ function lineNumberFormatter(number?: number): string {
} }
export function displayForConsoleLog(item: ConsoleLog): string { export function displayForConsoleLog(item: ConsoleLog): string {
const data: { type: string; lineNumber?: number; message: string } = { const data: {type: string; lineNumber?: number; message: string} = {
type: item.type, type: item.type,
lineNumber: undefined, lineNumber: undefined,
message: '', message: '',
@ -75,6 +75,6 @@ export function displayForConsoleLog(item: ConsoleLog): string {
return `<div class="console-line"><div class="console-location"><span class="console-type console-type-${ return `<div class="console-line"><div class="console-location"><span class="console-type console-type-${
data.type data.type
}">@${data.type}</span>:${lineNumberFormatter( }">@${data.type}</span>:${lineNumberFormatter(
data.lineNumber, data.lineNumber
)}</div><div class="console-message">${encodeHTML(data.message)}</div></div>`; )}</div><div class="console-message">${encodeHTML(data.message)}</div></div>`;
} }

17
source/assets/js/playground/editor-setup.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable node/no-extraneous-import */
import { import {
autocompletion, autocompletion,
closeBrackets, closeBrackets,
@ -10,8 +11,8 @@ import {
historyKeymap, historyKeymap,
indentWithTab, indentWithTab,
} from '@codemirror/commands'; } from '@codemirror/commands';
import { css as langCss } from '@codemirror/lang-css'; import {css as langCss} from '@codemirror/lang-css';
import { sass as langSass } from '@codemirror/lang-sass'; import {sass as langSass} from '@codemirror/lang-sass';
import { import {
bracketMatching, bracketMatching,
defaultHighlightStyle, defaultHighlightStyle,
@ -20,8 +21,8 @@ import {
indentOnInput, indentOnInput,
syntaxHighlighting, syntaxHighlighting,
} from '@codemirror/language'; } from '@codemirror/language';
import { lintKeymap } from '@codemirror/lint'; import {lintKeymap} from '@codemirror/lint';
import { EditorState } from '@codemirror/state'; import {EditorState} from '@codemirror/state';
import { import {
dropCursor, dropCursor,
highlightActiveLine, highlightActiveLine,
@ -31,7 +32,7 @@ import {
lineNumbers, lineNumbers,
} from '@codemirror/view'; } from '@codemirror/view';
import { playgroundHighlightStyle } from './theme.js'; import {playgroundHighlightStyle} from './theme.js';
const editorSetup = (() => [ const editorSetup = (() => [
[ [
@ -43,7 +44,7 @@ const editorSetup = (() => [
dropCursor(), dropCursor(),
indentOnInput(), indentOnInput(),
syntaxHighlighting(playgroundHighlightStyle), syntaxHighlighting(playgroundHighlightStyle),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
bracketMatching(), bracketMatching(),
closeBrackets(), closeBrackets(),
autocompletion(), autocompletion(),
@ -67,11 +68,11 @@ const outputSetup = (() => [
highlightSpecialChars(), highlightSpecialChars(),
foldGutter(), foldGutter(),
syntaxHighlighting(playgroundHighlightStyle), syntaxHighlighting(playgroundHighlightStyle),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
highlightActiveLine(), highlightActiveLine(),
EditorState.readOnly.of(true), EditorState.readOnly.of(true),
], ],
langCss(), langCss(),
])(); ])();
export { editorSetup, outputSetup }; export {editorSetup, outputSetup};

15
source/assets/js/playground/theme.ts
View File

@ -1,5 +1,6 @@
import { HighlightStyle } from '@codemirror/language'; /* eslint-disable node/no-extraneous-import */
import { tags } from '@lezer/highlight'; import {HighlightStyle} from '@codemirror/language';
import {tags} from '@lezer/highlight';
const playgroundHighlightStyle = HighlightStyle.define([ const playgroundHighlightStyle = HighlightStyle.define([
{ {
@ -41,14 +42,14 @@ const playgroundHighlightStyle = HighlightStyle.define([
color: 'var(--sl-color--code-warm)', color: 'var(--sl-color--code-warm)',
fontWeight: '600', fontWeight: '600',
}, },
{ tag: tags.punctuation, color: 'var(--sl-color--code-muted-dark)' }, {tag: tags.punctuation, color: 'var(--sl-color--code-muted-dark)'},
{ tag: tags.string, color: 'var(--sl-color--code-bright)' }, {tag: tags.string, color: 'var(--sl-color--code-bright)'},
{ tag: tags.unit, color: 'var(--sl-color--code-base)' }, {tag: tags.unit, color: 'var(--sl-color--code-base)'},
{ tag: tags.atom, color: 'var(--sl-color--code-base)' }, {tag: tags.atom, color: 'var(--sl-color--code-base)'},
{ {
tag: tags.labelName, tag: tags.labelName,
color: 'var(--sl-color--code-dark)', color: 'var(--sl-color--code-dark)',
fontWeight: '600', fontWeight: '600',
}, },
]); ]);
export { playgroundHighlightStyle }; export {playgroundHighlightStyle};

11
source/assets/js/playground/utils.ts
View File

@ -1,7 +1,8 @@
import { Diagnostic } from '@codemirror/lint'; /* eslint-disable node/no-extraneous-import */
import { Exception, OutputStyle, Syntax } from 'sass'; import {Diagnostic} from '@codemirror/lint';
import {Exception, OutputStyle, Syntax} from 'sass';
import { ConsoleLog } from './console-utils'; import {ConsoleLog} from './console-utils';
export type PlaygroundState = { export type PlaygroundState = {
inputFormat: Syntax; inputFormat: Syntax;
@ -40,8 +41,8 @@ export function base64ToState(string: string): Partial<PlaygroundState> {
return state; return state;
} }
type ParseResultSuccess = { css: string }; type ParseResultSuccess = {css: string};
type ParseResultError = { error: Exception | unknown }; type ParseResultError = {error: Exception | unknown};
export type ParseResult = ParseResultSuccess | ParseResultError; export type ParseResult = ParseResultSuccess | ParseResultError;
export function errorToDiagnostic(error: Exception | unknown): Diagnostic { export function errorToDiagnostic(error: Exception | unknown): Diagnostic {