Skip to content

Refactor logic and fix bugs #4

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.

Sign up for GitHub

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

Merged
mr150 merged 13 commits into from
Jan 11, 2026
Merged

Refactor logic and fix bugs #4

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
99373c5
fix: fix various stylistical bugs and refactor core logic
Ramazanmak Jan 2, 2026
029dbce
chore: restore initial vite.config.js
Ramazanmak Jan 2, 2026
4a36db5
fix: fix preview logic and minor stylistical bugs
Ramazanmak Jan 7, 2026
1624739
fix: fix minor mistakes and remove useless code
Ramazanmak Jan 8, 2026
3a051a0
fix: fix minor mistakes and change importmap
Ramazanmak Jan 9, 2026
142eacb
fix: make some minor stylistical corrections
Ramazanmak Jan 9, 2026
944908d
ci: set custom cname on GH Pages
Ramazanmak Jan 9, 2026
2613575
chore: remove unused utils from initial markup
mr150 Jan 9, 2026
1746589
chore: remove unused script import from html
mr150 Jan 9, 2026
ac09481
fix: change vite.config.js and add a script for the correct importmap
Ramazanmak Jan 10, 2026
618ab61
fix: roll back the importmap updates
Ramazanmak Jan 11, 2026
b671374
chore: clean the initial markup
mr150 Jan 11, 2026
d220d67
fix: fix preview crash when changing sass config
mr150 Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,17 @@
<html lang="en" class="Fnf-mUss -HeaderH14u -SectionHeaderH10u">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="src/assets/img/favicon.png" type="image/x-icon">
<link rel="icon" href="/img/favicon.png" type="image/x-icon">
Comment thread
mr150 marked this conversation as resolved.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mlut playground</title>
<link rel="stylesheet" href="assets/style.css" />
<script type="importmap">
{
"imports": {
"immutable": "https://unpkg.com/immutable@^4.0.0",
"sass": "https://unpkg.com/sass@^1.63.0/sass.default.js"
}
}
</script>
</head>
<body class="P0 M0 H100vh">
<header class="W100p H-$headerH Mxh18u D-g Gtc1fr;1fr P2u;5u Bgc-$core700">
<!-- Logo part-->
<div class="W50p D-f Ai-c">
<div class=" D-f Ai-fe Gap3u W100p">
<img class="D H7u" alt="mlut logo" src="src/assets/img/mlut.png">
<img class="D H7u" alt="mlut logo" src="/img/mlut.png">
<span class="D-ib Fns5u C-$accent700">Playground</span>
</div>
</div>
Expand Down Expand Up @@ -64,36 +56,45 @@
</div>

<!-- The right part-->
<div class="W50p D-f Fld-c ">
<div class="W50p">
<!-- Preview part-->
<div class="Flg1 Bdl1;s;$accent700 D-f Fld-c">
<div class="H100p Bdl1;s;$accent700">
<!-- Header-->
<div class="H-$sectionHeaderH Flg0 P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
<div class="H-$sectionHeaderH P0;5u Bgc-$core800 Bdt1;s;$accent700 Bdb1;s;$accent700 D-f Jc-sb Ai-c">
<span class="C-$brand Fnw600"> Preview</span>
</div>
<!-- Preview's Body -->
<div class="H-calc(100%;-;$sectionHeaderH) Ps-r">
<code-preview class="preview-loader"></code-preview>
<div class="H-calc(100%;-;$sectionHeaderH) Ps-r Ovy-a Ovx-h">
Comment thread
mr150 marked this conversation as resolved.
Outdated
<div class="-Sz100p Mxh100p loader Zi8_b Zi9_af">
<code-preview></code-preview>
</div>
</div>
</div>
</div>
</main>
</main-comp>
</div>
<script type="importmap">
{
"imports": {
"immutable": "https://unpkg.com/immutable@^4.0.0",
"sass": "https://unpkg.com/sass@^1.63.0/sass.default.js"
}
}
</script>
<script type="module">
globalThis.mlut = {
['g' + 'it' + 'hub' + 'To' + 'ken']: 'g' + 'it' + 'hub_p' + 'at_11ACX5TXY0scktF',
};
</script>
<script type="module" src="/src/assets/scripts/loader-helper.js"></script>
<script type="module" src="/src/assets/scripts/eventBusContext.js"></script>
<script type="module" src="/src/components/main-comp.js"></script>
<script type="module" src="/src/components/style-tab.js"></script>
<script type="module" src="/src/components/copy-button.js"></script>
<script type="module" src="/src/components/content-loader.js"></script>
<script type="module" src="/src/components/code-editor.js"></script>
<script type="module" src="/src/components/code-preview.js"></script>
<script type="module" src="/src/components/tab-switch.js"></script>
<script type="module" src="/src/components/main-comp.js"></script>
<script type="module" src="/src/components/code-preview.js"></script>
<script type="module" src="https://unpkg.com/@mlut/core@latest/dist/index.js"></script>

</body>
</html>
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@types/node": "^25.0.3",
"codemirror": "^6.0.2",
"lit": "3.3.1",
"nanoevents": "^9.1.0",
Comment thread
Ramazanmak marked this conversation as resolved.
Outdated
"path-browserify-esm": "^1.0.6",
"thememirror": "^2.0.1"
},
Expand Down
0 src/assets/img/favicon.png → public/img/favicon.png
View file
Open in desktop
File renamed without changes
0 src/assets/img/icons.svg → public/img/icons.svg
View file
Open in desktop
File renamed without changes
0 src/assets/img/mlut.png → public/img/mlut.png
View file
Open in desktop
File renamed without changes
19 changes: 10 additions & 9 deletions src/assets/data/initial-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const initialLayout = `
<div id="hero-page" class="-Gdl120d,$core750,$core650,$core600 Fnf-mUss H100vh P-$heroPadding;0;5u D-f Jc-c Ai-c">
export const initialLayout = `
<div id="hero-page" class="-Gdl120d,$core750,$core650,$core600 Fnf-mUss H100p P-$heroPadding;0;5u D-f Jc-c Ai-c">
Comment thread
Ramazanmak marked this conversation as resolved.
Outdated

<div class="D-f Jc-c Ai-c Fld-c wrapper">

Expand All @@ -20,12 +20,13 @@ export const initialLayout = `
</div>
</div>
</div>
`
`;

export const initialConfig = `
@use "@mlut/core";

@media (prefers-color-scheme: dark){
html{
*{

@mr150 mr150 Jan 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Почему *? Это ухудшает перфоманс

@Ramazanmak Ramazanmak Jan 3, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я его вместо html поставил, потому что в shadow DOM нет html тега теперь. Но может, стоит просто что-то вроде body поставить по умолчанию, чтобы на него стили повесить, действительно.

@mr150 mr150 Jan 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для этого же :root есть

--ml-accent900:#fff;
--ml-accent850:rgb(209,213,219,1);
--ml-core750:#121828;
Expand All @@ -35,15 +36,15 @@ export const initialConfig = `
}

@media (prefers-color-scheme: light){
html{
*{
--ml-accent900:rgb(17,24,39);
--ml-accent850:rgb(41,42,51,1);
--ml-core750:rgb(236,240,246,0.5);
--ml-core650:rgba(218,178,255,0.1);
--ml-core600:rgba(142,197,255,0.4);
}
}
`
`;

export const errorLayout = `
<div>
Expand All @@ -55,7 +56,7 @@ export const errorLayout = `
Check out the console
</h2>
</div>
`
`;

export const errorStyles = `
@media (prefers-color-scheme: light){
Expand All @@ -73,7 +74,7 @@ export const errorStyles = `
}
div {
background-color:var(--ml-core800);
height: 100vh;
height: 100%;
weight: 100%;
display: flex;
flex-direction: column;
Expand All @@ -87,4 +88,4 @@ export const errorStyles = `
padding: 0;
margin: 0 0 1rem
}
`
`;
27 changes: 0 additions & 27 deletions src/assets/scripts/event-bus.js
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions src/assets/scripts/eventBusContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createNanoEvents } from 'nanoevents';
import { createContext } from '@lit/context';

export const eventBusContext = createContext('eventBus');
export const eventBus = createNanoEvents();
8 changes: 4 additions & 4 deletions src/assets/scripts/loader-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// replace with normal auth
//replace with normal auth
//eslint-disable-next-line
globalThis.mlut.githubToken += 'ukhbxMg_OmqGHNu4' + 'ilNlnHBDEFpHbfdfqPYkbR1E2vnRbfN6Q7w44ZMECDZuhsGp2EK';

const contentLoader = document.querySelector('.loader');
window.addEventListener('load', () => {
contentLoader.classList.remove('loader')
})
window.addEventListener('load', () => {
contentLoader.classList.remove('loader');
});
2 changes: 2 additions & 0 deletions src/assets/style/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ html {
@media (prefers-color-scheme: light){
html {
--ml-core800: #f0f0f1;
--ml-core750: #fbf9fe;
Comment thread
mr150 marked this conversation as resolved.
--ml-core700: #fbf9fe;
--ml-accent800:#707481;
--ml-accent700: #7c7f8b;
Expand All @@ -20,6 +21,7 @@ html {
@media (prefers-color-scheme: dark){
html {
--ml-core800: #111827;
--ml-core750: #282c34;
--ml-core700: #0d1117;
--ml-accent800:#878c99;
--ml-accent700: #7f838f;
Expand Down
29 changes: 18 additions & 11 deletions src/components/code-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { css as langCSS } from '@codemirror/lang-css';
import { sass as langSASS } from '@codemirror/lang-sass';

import { initialLayout, initialConfig } from '../assets/data/initial-code.js';
import { eventBusContext } from './main-comp';
import { eventBusContext } from '../assets/scripts/eventBusContext.js';

const customTheme = Prec.highest(EditorView.theme({
'.cm-scroller': {
Expand All @@ -24,11 +24,16 @@ const customTheme = Prec.highest(EditorView.theme({
}));

export class CodeEditor extends LitElement {
_eventBus = new ContextConsumer(this, { context: eventBusContext });
_eventBus = new ContextConsumer(this, {
context: eventBusContext,
callback: (bus) => {

@mr150 mr150 Jan 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для чего это?

@Ramazanmak Ramazanmak Jan 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Это для того, чтобы не писать везде this._eventBus.value, а писать просто this.eventBus. Просто так напрямую сделать присвоение такого типа:

_eventBus = new ContextConsumer(...).value

не получается - результат будет undefined в том месте, где нам надо. А callback - удобный и простой способ.

@mr150 mr150 Jan 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(new ContextConsumer(...)).value - тоже не работает?)

@Ramazanmak Ramazanmak Jan 4, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нет, не работает)

export class CodePreview extends LitElement {
	eventBus = (new ContextConsumer(this, { context: eventBusContext })).value;

	async firstUpdated() {
		console.log(this.eventBus)
		...
	}
	...
}

Получается вот это:
image

@mr150 mr150 Jan 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тогда надо в конструкторе это по нормальному переписать, чтобы не было бесполезного свойства _eventBus и дублирующего публичного eventBus

this.eventBus = bus;
}
});

static properties = {
lang: { type: String },
timeoutID: { type: Number, state: false },
debounceTimeout: { type: Number, state: false },
view: { type: Object },
};

Expand All @@ -40,18 +45,20 @@ export class CodeEditor extends LitElement {
this.view = new EditorView(this.setEditorOptions(this.lang));

if (this.lang === 'css') {
this._eventBus.value.on('update-css', this.updateCss);
this.unbindUpdateCSS = this.eventBus.on('update-css', this.updateCss);
}

this._eventBus.value.on('request-copy', this.handleCopy);
this.unbindRequestCopy = this.eventBus.on('request-copy', this.handleCopy);
}

disconnectedCallback() {
super.disconnectedCallback();

if (this.lang === 'css') {
this._eventBus.value.off('update-css', this.updateCss);
this.unbindUpdateCSS();
}

this._eventBus.value.off('request-copy', this.handleCopy);
this.unbindRequestCopy();
}

setEditorOptions(lang) {
Expand Down Expand Up @@ -102,12 +109,12 @@ export class CodeEditor extends LitElement {
setDocChangeHandler() {
return EditorView.updateListener.of((update) => {
if (update.docChanged) {
clearTimeout(this.timeoutID);
clearTimeout(this.debounceTimeout);

if (this.lang !== 'css') {
this.timeoutID = setTimeout(() => {
this.debounceTimeout = setTimeout(() => {

this._eventBus.value.emit(`update-${this.lang}`, {
this.eventBus.emit(`update-${this.lang}`, {
detail: {
target: this,
updatedData: update.state.doc.toString(),
Expand Down Expand Up @@ -141,7 +148,7 @@ export class CodeEditor extends LitElement {

render() {
return html`
<div id="${this.lang}-editor" class="H100p Bgc-$core700 Ov-a Fns10u" style="height: ${this.inProgress ? '0' : '100%'}">
<div id="${this.lang}-editor" class="H100p Bgc-$core750 Ov-a Fns4u">
</div>
`;
}
Expand Down
Loading