Frontend mvp by Ramazanmak · Pull Request #3 · mlutcss/sandbox

Ramazanmak · 2025-12-24T19:54:15Z

No description provided.

mr150 · 2025-12-24T20:48:22Z

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mlut playground</title>
    <link rel="stylesheet" href="/src/assets/style/style.css" />
+		<script type="module" src="/src/components/code-editor.js"></script>


Все скрипты должны быть не в head а в концу body

mr150 · 2025-12-24T20:49:07Z

+							</button>
+						</div>
+						<!-- HTML part's body-->
+						<div class="H-calc(100%;-;var(--ml-sectionHeaderH)) Bgc-$core700">


Попробуй здесь обычный синтаксис для кастомных свойств через $

mr150 · 2025-12-24T20:50:02Z

+    "thememirror": "^2.0.1"
  },
  "devDependencies": {
+    "@codemirror/lang-html": "^6.4.11",


Это не dev зависимость. Хотя если vite в бандл все собирает, то можно и все в dev

Случайно по инерции в dev-зависимости записал :)

mr150 · 2025-12-24T21:32:31Z

@@ -0,0 +1,189 @@
+import {signal} from "@lit-labs/signals"
+
+const layout = signal( `


Если это что-то временное, то ок, а иначе выглядит очень странно

А почему это выглядит странно? Лучше объявление сигналов сделать в отдельном месте, а данные держать отдельно?

mr150 · 2025-12-24T21:33:11Z

+import { LitElement, html } from 'lit';
+import { watch, SignalWatcher } from '@lit-labs/signals';
+
+// General CodeMirror imports


Зачем эти комменты - все очевидно же. Максимум, можно пустой строкой отделить

mr150 · 2025-12-24T21:37:32Z

+}))
+
+export class CodeEditor extends LitElement {
+


Зачем пустая строка в начале класса и некоторых методов?

mr150 · 2025-12-24T21:40:56Z

+export class MainComp extends LitElement {
+
+	createRenderRoot() {
+		return this.querySelector('main');


Зачем здесь shadow dom?

mr150 · 2025-12-24T21:44:13Z

-		textareas.forEach((el, index) => {
-			if (el.id === `${this.radioId.toLowerCase()}-area`) {
+	displayEditor() {
+		const editors = document.querySelectorAll('div[data-type="style"]');


Здесь что-то странное происходит. Этот компонент не должен явно доставать другие

mr150 · 2025-12-28T21:28:03Z

@@ -0,0 +1,52 @@
+const initialLayout =  `


Suggested change

const initialLayout = `

export const initialLayout = `

mr150 · 2025-12-28T21:31:02Z

@@ -0,0 +1,26 @@
+export class EventBus {


Зачем писать свой с багами, если можно взять готовую либу? Вот эту например, 108 байт весит

mr150 · 2025-12-28T21:37:37Z

+		<script type="importmap">
+			{
+				"imports": {
+					"@mlut/core": "../packages/core/dist/index.js",


Зачем это?

mr150 · 2025-12-28T21:38:56Z

+			}
+		</script>
+		<script type="module">
+			const contentLoader = document.querySelector('.loader');


Зачем это отдельным скриптом, да еще и в теге?

mr150 · 2025-12-28T21:43:45Z

+`
+const initialConfig = `
+@use "@mlut/core/tools";
+@use "@mlut/core/dist/sass/css/styles";


Зачем здесь это? Достаточно @mlut/core импортировать

mr150 · 2025-12-28T21:45:14Z

+  }
+}
+`
+const loaderStyles = `


Это зачем?

mr150 · 2025-12-28T21:47:21Z

+		this.view = new EditorView(this.setEditorOptions(this.lang));
+
+		if (this.lang === 'css') {
+			this._eventBus.value.on('update-css', this.updateCss);


Зачем каждый раз писать _eventBus.value если можно сразу в свойство записать это value?

mr150 · 2025-12-28T21:54:21Z

+					this.timeoutID = setTimeout(() => {
+
+						if (this.lang === 'html') {
+							this._eventBus.value.emit('update-html', {


Зачем здесь дублирование кода, если можно было использовать один код с 'update-${this.lang}l'?

mr150 · 2025-12-28T21:55:04Z

+
+	static properties = {
+		lang: { type: String },
+		timeoutID: { type: Number, state: false },


По названию непонятно, что за timeoutID

mr150 · 2025-12-28T22:18:21Z

+		this._eventBus.value.on('update-sass', this.handleUpdate);
+		const { jitEngine } = await import('https://unpkg.com/@mlut/core@latest/dist/index.js');
+		await jitEngine.init(['config.scss', initialConfig]);
+		jitEngine.putContent('index.html', initialLayout);


Зачем здесь отдельно делается putContent, если есть функция для обновления? Тут только инициализация должна быть. Еще и разный путь (название) до файлов

mr150 · 2025-12-28T22:19:22Z

+	async firstUpdated() {
+		this._eventBus.value.on('update-html', this.handleUpdate);
+		this._eventBus.value.on('update-sass', this.handleUpdate);
+		const { jitEngine } = await import('https://unpkg.com/@mlut/core@latest/dist/index.js');


Почему динамический, а не обычный импорт?

mr150 · 2025-12-28T22:25:53Z

@@ -0,0 +1,16 @@
+import { LitElement, html } from 'lit';
+
+export class ContentLoader extends LitElement {


Зачем отдельный компонент для лоадера? Недостаточно 1 css класса?

mr150 · 2025-12-28T22:29:03Z

@@ -0,0 +1,23 @@
+import { LitElement, html } from 'lit';
+
+export class ErrorFallback extends LitElement {


Зачем этот компонент? Надо просто 1 абзац стилизованного текста показать, если ошибка

mr150 · 2025-12-28T22:31:33Z

+
+import { EventBus } from '../assets/scripts/event-bus.js';
+
+export const eventBusContext = createContext('eventBus');


Контекст должен в отдельном модуле объявляться. В доке же есть пример

mr150 · 2025-12-28T22:37:13Z

+
+	constructor() {
+		super();
+		this.cssChecked = 'unchecked';


Почему такое странное переключение состояния?

mr150 · 2025-12-28T23:20:47Z

+
+	render() {
+		return html`
+		<div id="${this.lang}-editor" class="H100p Bgc-$core700 Ov-a" style="height: ${this.inProgress ? '0' : '100%'}">


Зачем здесь inProgress?

mr150 · 2025-12-29T00:38:25Z

+		}
+
+		return html`
+				<iframe srcdoc='<!DOCTYPE html>


Тут что-то странное делается. По идее, надо отправлять в iframe по api. Либо попробуй shadow dom, чтобы такое же простое обновление сохранить

feat: draft commit with core logic

54020e0

Ramazanmak requested a review from mr150 December 24, 2025 19:54

Ramazanmak self-assigned this Dec 24, 2025

mr150 reviewed Dec 24, 2025

View reviewed changes

feat: add loaders, error fallbacks and enhance the logic

0929e77

Ramazanmak force-pushed the feat/logic branch from 0ae5501 to 0929e77 Compare December 28, 2025 19:52

Ramazanmak requested a review from mr150 December 28, 2025 19:54

mr150 reviewed Dec 28, 2025

View reviewed changes

mr150 added 2 commits December 29, 2025 03:34

fix: fix event bus logic

573a380

fix(code-preview): fix the addition of unnecessary styles

a821904

mr150 reviewed Dec 29, 2025

View reviewed changes

Merge branch 'main' into feat/logic

90e9f1f

Ramazanmak force-pushed the feat/logic branch 2 times, most recently from d8f1199 to df774bb Compare December 29, 2025 14:16

fix: correct some minor mistakes and change the code-preview logic

0b43148

Ramazanmak force-pushed the feat/logic branch from df774bb to 0b43148 Compare December 29, 2025 14:18

Ramazanmak and others added 4 commits December 29, 2025 19:34

fix: correct some minor stylistical mistakes

8293a71

fix: correct some minor stylistical mistakes

1a0b565

fix: fix the main loader logic

358335f

refactor(code-preview): remove unused markup

427f9b4

mr150 approved these changes Dec 29, 2025

View reviewed changes

mr150 changed the title ~~feat: draft commit with core logic~~ Frontend mvp Dec 29, 2025

mr150 merged commit a0c4ef1 into main Dec 29, 2025
1 check passed

		@@ -0,0 +1,189 @@
		import {signal} from "@lit-labs/signals"

		const layout = signal( `

		@@ -0,0 +1,16 @@
		import { LitElement, html } from 'lit';

		export class ContentLoader extends LitElement {

		@@ -0,0 +1,23 @@
		import { LitElement, html } from 'lit';

		export class ErrorFallback extends LitElement {


		import { EventBus } from '../assets/scripts/event-bus.js';

		export const eventBusContext = createContext('eventBus');

Conversation

Ramazanmak commented Dec 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mr150 Dec 24, 2025 •

edited

Loading

mr150 Dec 28, 2025 •

edited

Loading

mr150 Dec 28, 2025 •

edited

Loading

mr150 Dec 28, 2025 •

edited

Loading