JavaScript import: ESM modullarini ulashning barcha shakllari

import { narxlar as taomlar } from "./menyu.mjs";
import menyuniChiqar from "./menyu.mjs";
import { narxniTop } from "./menyu.mjs";

// asosiy.mjs
import * as menyu from "./menyu.mjs";
import * as yetkazish from "./yetkazish.mjs";

const jami = menyu.narxniTop("osh") + yetkazish.narxniTop(3);
console.log(`Jami: ${jami} so'm`);

Jami: 45000 so'm

a
b 1
asosiy boshlandi
asosiy 1 2

vazifalar/
├── index.html
├── README.md
└── assets/
    ├── css/
    │   └── vazifalar.css
    └── js/
        ├── asosiy.js
        ├── holat.js
        ├── paket.js
        ├── render.js
        ├── royxat.js
        └── vazifa.js

<script type="module" src="assets/js/asosiy.js"></script>

// royxat.js — vazifalar to'plami: so'rovlar, o'zgartirishlar, obuna
import { Vazifa } from "./vazifa.js";

// Quyidagi beshtasi eksport qilinmaydi — faqat shu modul ichida
function idYasovchiYarat(boshlangich) {
  let keyingi = boshlangich;
  return () => keyingi++;
}

function faollarOldin(a, b) {
  return Number(a.bajarildi) - Number(b.bajarildi);
}

function guruhNomi(vazifa) {
  return vazifa.bajarildi ? "bajarilgan" : "faol";
}

function teglariniOl(matn) {
  return new Set(
    matn
      .toLowerCase()
      .split(" ")
      .filter((soz) => soz.length > 1 && soz.startsWith("#")),
  );
}

function tegToplami(vazifalar) {
  return new Set(
    vazifalar.flatMap((vazifa) => [...teglariniOl(vazifa.matn)]),
  );
}

export class VazifalarRoyxati {
  #vazifalar = [];
  #yangiId = idYasovchiYarat(1);
  #tinglovchilar = [];

  static dan(malumotlar) {
    const yangi = new VazifalarRoyxati();
    yangi.#vazifalar = malumotlar.map((m) => Vazifa.dan(m));
    const engKatta = malumotlar.reduce(
      (eng, m) => Math.max(eng, m.id),
      0,
    );
    yangi.#yangiId = idYasovchiYarat(engKatta + 1);
    return yangi;
  }

  static mosmi(vazifa, filtr) {
    if (filtr === "faol") {
      return !vazifa.bajarildi;
    }
    if (filtr === "bajarilgan") {
      return vazifa.bajarildi;
    }
    return true;
  }

  // So'rovlar: royxatni o'zgartirmaydi
  statistika() {
    const guruhlar = Object.groupBy(this.#vazifalar, guruhNomi);
    return {
      qoldi: guruhlar.faol?.length ?? 0,
      bajarildi: guruhlar.bajarilgan?.length ?? 0,
    };
  }

  get qoldi() {
    return this.statistika().qoldi;
  }

  korinadiganlar(filtr) {
    return this.#vazifalar
      .filter((v) => VazifalarRoyxati.mosmi(v, filtr))
      .toSorted(faollarOldin);
  }

  top(id) {
    return this.#vazifalar.find((v) => v.id === id);
  }

  matnBormi(matn, ozId) {
    const kichik = matn.toLowerCase();
    return this.#vazifalar.some(
      (v) => v.id !== ozId && v.matn.toLowerCase() === kichik,
    );
  }

  tegHisobi() {
    return this.#vazifalar
      .flatMap((vazifa) => [...teglariniOl(vazifa.matn)])
      .reduce(
        (sanoq, teg) => sanoq.set(teg, (sanoq.get(teg) ?? 0) + 1),
        new Map(),
      );
  }

  yopilganTeglar() {
    const bajarilgan = this.#vazifalar.filter((v) => v.bajarildi);
    const faol = this.#vazifalar.filter((v) => !v.bajarildi);
    return tegToplami(bajarilgan).difference(tegToplami(faol));
  }

  // Kuzatuvchi: royxat o'zgarsa, obunachilarga xabar
  obuna(tinglovchi) {
    this.#tinglovchilar.push(tinglovchi);
    return () => {
      this.#tinglovchilar = this.#tinglovchilar.filter(
        (t) => t !== tinglovchi,
      );
    };
  }

  #xabarBer() {
    this.#tinglovchilar.forEach((tinglovchi) => tinglovchi());
  }

  // O'zgartiruvchilar: har biri oxirida #xabarBer()
  qosh(matn) {
    const vazifa = new Vazifa(this.#yangiId(), matn);
    this.#vazifalar.push(vazifa);
    this.#xabarBer();
    return vazifa;
  }

  almashtir(id) {
    this.top(id).almashtir();
    this.#xabarBer();
  }

  matnniOzgartir(id, matn) {
    const ozgardi = this.top(id).matnniOzgartir(matn);
    this.#xabarBer();
    return ozgardi;
  }

  ochir(id) {
    this.#vazifalar = this.#vazifalar.filter((v) => v.id !== id);
    this.#xabarBer();
  }

  *[Symbol.iterator]() {
    yield* this.#vazifalar;
  }

  toJSON() {
    return this.#vazifalar.map((v) => v.toJSON());
  }
}

// paket.js — eksport va import: {versiya: 1, vazifalar: [...]}
import { Vazifa, VazifaXatosi } from "./vazifa.js";

const XAVFLI_KALITLAR = ["__proto__", "constructor", "prototype"];
const VAZIFA_MAYDONLARI = ["id", "matn", "bajarildi"];
const eksportMaydonlari = [
  "versiya", "vazifalar", "id", "matn", "bajarildi",
];

export function eksportMatni(vazifalar) {
  const paket = { versiya: 1, vazifalar };
  return JSON.stringify(paket, eksportMaydonlari, 2);
}

// holat.js — ilova holati: yagona haqiqat manbai
import { VazifalarRoyxati } from "./royxat.js";

function chuqurMuzlat(obyekt) {
  for (const qiymat of Object.values(obyekt)) {
    if (typeof qiymat === "object" && qiymat !== null) {
      chuqurMuzlat(qiymat);
    }
  }
  return Object.freeze(obyekt);
}

const boshlangichVazifalar = chuqurMuzlat([
  { id: 1, matn: "Non olish", bajarildi: false },
  { id: 2, matn: "DOM darsini takrorlash", bajarildi: true },
  { id: 3, matn: "Onamga qo'ng'iroq qilish", bajarildi: false },
]);

export const holat = {
  vazifalar: VazifalarRoyxati.dan(boshlangichVazifalar),
  filtr: "hammasi",
  tahrirId: null,
};

// So'rovlar: faqat qiymat qaytaradi
export function xatoniTop(matn, vazifalar, ozId) {
  if (matn === "") {
    return "Vazifa matnini yozing.";
  }
  if (vazifalar.matnBormi(matn, ozId)) {
    return "Bu vazifa ro'yxatda allaqachon bor.";
  }
  return null;
}

export function korinadiganlar() {
  return holat.vazifalar.korinadiganlar(holat.filtr);
}

export function vazifaniTop(id) {
  return holat.vazifalar.top(id);
}

// O'zgartiruvchilar: avval holat, oxirida royxat (u render'ni
// kuzatuvchi orqali chaqiradi)
export function vazifaQosh(matn) {
  if (holat.filtr === "bajarilgan") {
    holat.filtr = "hammasi";
  }
  holat.vazifalar.qosh(matn);
}

export function vazifaniAlmashtir(id) {
  holat.vazifalar.almashtir(id);
}

export function vazifaniOchir(id) {
  holat.vazifalar.ochir(id);
}

export function matnniAlmashtir(id, matn) {
  holat.tahrirId = null;
  holat.vazifalar.matnniOzgartir(id, matn);
}

// render.js — holatdan ekranga: chizish, fokus, e'lon
import { Vazifa } from "./vazifa.js";
import { holat, korinadiganlar } from "./holat.js";

export const boshMatnlar = Object.freeze({
  hammasi: "Hozircha vazifa yo'q. Birinchisini qo'shing!",
  faol: "Faol vazifa yo'q.",
  bajarilgan: "Bajarilgan vazifa hali yo'q.",
});

// Sahifa elementlari
export const forma = document.getElementById("yangi-forma");
export const maydon = document.getElementById("yangi-matn");
const maydonXato = document.getElementById("yangi-matn-xato");
export const filtrlar = document.getElementById("filtrlar");
const sarlavha = document.getElementById("royxat-sarlavha");
export const royxat = document.getElementById("royxat");
const boshXabar = document.getElementById("bosh-xabar");
const hisob = document.getElementById("hisob");
const teglarQatori = document.getElementById("teglar");
const elon = document.getElementById("elon");
export const eksportTugma = document.getElementById("eksport-tugma");
export const eksportMatn = document.getElementById("eksport-matn");
export const importMatn = document.getElementById("import-matn");
export const importTugma = document.getElementById("import-tugma");
const importXato = document.getElementById("import-xato");

function tugmaYasa(amal, matn, nomi) {
  const tugma = document.createElement("button");
  tugma.type = "button";
  tugma.dataset.amal = amal;
  tugma.textContent = matn;
  tugma.setAttribute("aria-label", `${matn}: ${nomi}`);
  return tugma;
}

// Amal nomi va tugma matni — bir joyda, juftlik bilan
const tahrirTugmasi = tugmaYasa.bind(null, "tahrirla", "Tahrirlash");
const ochirTugmasi = tugmaYasa.bind(null, "ochir", "O'chirish");
const saqlaTugmasi = tugmaYasa.bind(null, "saqla", "Saqlash");
const bekorTugmasi = tugmaYasa.bind(null, "bekor", "Bekor qilish");

function oddiyQator(vazifa) {
  const li = document.createElement("li");
  li.dataset.id = vazifa.id;
  li.classList.toggle("bajarildi", vazifa.bajarildi);
  const katak = document.createElement("input");
  katak.type = "checkbox";
  katak.id = `vazifa-${vazifa.id}`;
  katak.dataset.amal = "almashtir";
  katak.checked = vazifa.bajarildi;
  const yorliq = document.createElement("label");
  yorliq.htmlFor = katak.id;
  yorliq.textContent = vazifa.matn;
  li.append(
    katak,
    yorliq,
    tahrirTugmasi(vazifa.matn),
    ochirTugmasi(vazifa.matn),
  );
  return li;
}

function tahrirQatori(vazifa) {
  const li = document.createElement("li");
  li.dataset.id = vazifa.id;
  const kiritma = document.createElement("input");
  kiritma.id = "tahrir-maydon";
  kiritma.value = vazifa.matn;
  kiritma.maxLength = Vazifa.MAKS_UZUNLIK;
  kiritma.setAttribute("aria-label", "Vazifa matni");
  li.append(
    kiritma,
    saqlaTugmasi(vazifa.matn),
    bekorTugmasi(vazifa.matn),
  );
  return li;
}

function qatorYasa(vazifa) {
  if (vazifa.id === holat.tahrirId) {
    return tahrirQatori(vazifa);
  }
  return oddiyQator(vazifa);
}

function matnniYoz(element, matn) {
  if (element.textContent !== matn) {
    element.textContent = matn;
  }
}

function teglarMatni(sanoq) {
  return [...sanoq]
    .map(([teg, soni]) => `${teg} — ${soni}`)
    .join(", ");
}

function teglarniYoz() {
  const sanoq = holat.vazifalar.tegHisobi();
  const yopilgan = [...holat.vazifalar.yopilganTeglar()];
  const qoshimcha =
    yopilgan.length > 0 ? `. Yopilgan: ${yopilgan.join(", ")}` : "";
  teglarQatori.hidden = sanoq.size === 0;
  matnniYoz(
    teglarQatori,
    `Teglar: ${teglarMatni(sanoq)}${qoshimcha}`,
  );
}

export function render() {
  royxat.replaceChildren(...korinadiganlar().map(qatorYasa));

  boshXabar.hidden = royxat.children.length > 0;
  matnniYoz(boshXabar, boshMatnlar[holat.filtr]);
  filtrlar.querySelectorAll("[data-filtr]").forEach((tugma) => {
    const tanlangan = tugma.dataset.filtr === holat.filtr;
    tugma.setAttribute("aria-pressed", String(tanlangan));
  });
  const { qoldi, bajarildi } = holat.vazifalar.statistika();
  matnniYoz(
    hisob,
    `${qoldi} ta vazifa qoldi, ${bajarildi} ta bajarildi`,
  );
  teglarniYoz();
}

// Fokus va e'lon: render'dan keyin
export function fokusla(id, amal, zaxiraId) {
  // querySelector — royxat'ning metodi: uni nuqta bilan chaqiramiz
  const top = (i) =>
    royxat.querySelector(`[data-id="${i}"] [data-amal="${amal}"]`);
  const nishon = top(id) ?? top(zaxiraId) ?? sarlavha;
  nishon.focus();
}

export function qoshniId(id) {
  const qator = royxat.querySelector(`[data-id="${id}"]`);
  const qoshni =
    qator.nextElementSibling ?? qator.previousElementSibling;
  return qoshni === null ? null : Number(qoshni.dataset.id);
}

export function elonQil(matn) {
  elon.textContent = matn;
}

export function xatoniKorsat(xabar) {
  maydonXato.textContent = xabar;
  maydon.setAttribute("aria-invalid", "true");
  maydon.setAttribute("aria-describedby", maydonXato.id);
}

export function xatoniTozala() {
  maydonXato.textContent = "";
  maydon.removeAttribute("aria-invalid");
  maydon.removeAttribute("aria-describedby");
}

export function tahrirgaOt() {
  const kiritma = document.getElementById("tahrir-maydon");
  kiritma.focus();
  kiritma.select();
}

export function importXatosiniKorsat(xabar) {
  importXato.textContent = xabar;
  importMatn.setAttribute("aria-invalid", "true");
  importMatn.focus();
}

export function importXatosiniTozala() {
  importXato.textContent = "";
  importMatn.removeAttribute("aria-invalid");
}

// asosiy.js — kirish nuqtasi: hodisalarni ulaydi, ilovani boshlaydi
import { VazifaXatosi } from "./vazifa.js";
import { VazifalarRoyxati } from "./royxat.js";
import { eksportMatni, paketniOqi } from "./paket.js";
import {
  holat,
  xatoniTop,
  vazifaniTop,
  vazifaQosh,
  vazifaniAlmashtir,
  vazifaniOchir,
  matnniAlmashtir,
} from "./holat.js";
import {
  boshMatnlar,
  forma,
  maydon,
  royxat,
  filtrlar,
  eksportTugma,
  eksportMatn,
  importMatn,
  importTugma,
  render,
  fokusla,
  qoshniId,
  elonQil,
  xatoniKorsat,
  xatoniTozala,
  tahrirgaOt,
  importXatosiniKorsat,
  importXatosiniTozala,
} from "./render.js";

// Holat + chizish: royxatga tegmaydigan o'zgarishlar
function tahrirniBoshla(id) {
  holat.tahrirId = id;
  render();
}

function tahrirniYop() {
  holat.tahrirId = null;
  render();
}

function filtrniTanla(filtr) {
  // Faqat boshMatnlar ning O'Z kalitlari — "constructor" filtr emas
  if (!Object.hasOwn(boshMatnlar, filtr)) {
    return;
  }
  holat.filtr = filtr;
  holat.tahrirId = null;
  render();
}

function royxatniAlmashtir(malumotlar) {
  holat.vazifalar = VazifalarRoyxati.dan(malumotlar);
  holat.vazifalar.obuna(render);
  holat.filtr = "hammasi";
  holat.tahrirId = null;
  render();
}

function tahrirniSaqla() {
  const kiritma = document.getElementById("tahrir-maydon");
  const id = holat.tahrirId;
  const matn = kiritma.value.trim();
  const xato = xatoniTop(matn, holat.vazifalar, id);
  if (xato !== null) {
    kiritma.setAttribute("aria-invalid", "true");
    kiritma.focus();
    elonQil(xato);
    return;
  }
  matnniAlmashtir(id, matn);
  fokusla(id, "tahrirla", null);
  elonQil("O'zgarish saqlandi.");
}

function tahrirniBekorQil() {
  const id = holat.tahrirId;
  tahrirniYop();
  fokusla(id, "tahrirla", null);
}

// Hodisalar: har joyda bitta tinglovchi
forma.addEventListener("submit", (event) => {
  event.preventDefault();
  elonQil("");
  const matn = maydon.value.trim();
  const xato = xatoniTop(matn, holat.vazifalar, null);
  if (xato !== null) {
    xatoniKorsat(xato);
    maydon.focus();
    return;
  }
  xatoniTozala();
  vazifaQosh(matn);
  forma.reset();
  elonQil(`«${matn}» qo'shildi.`);
});

maydon.addEventListener("input", () => {
  if (maydon.getAttribute("aria-invalid") !== "true") {
    return;
  }
  const matn = maydon.value.trim();
  if (xatoniTop(matn, holat.vazifalar, null) === null) {
    xatoniTozala();
  }
});

royxat.addEventListener("click", (event) => {
  const nishon = event.target.closest("[data-amal]");
  if (nishon === null || !royxat.contains(nishon)) {
    return;
  }
  elonQil("");
  const amal = nishon.dataset.amal;
  const id = Number(nishon.closest("li").dataset.id);
  const zaxira = qoshniId(id);
  if (amal !== "saqla" && amal !== "bekor") {
    holat.tahrirId = null;
  }
  switch (amal) {
    case "almashtir":
      vazifaniAlmashtir(id);
      fokusla(id, "almashtir", zaxira);
      break;
    case "ochir":
      elonQil(`«${vazifaniTop(id).matn}» o'chirildi.`);
      vazifaniOchir(id);
      fokusla(zaxira, "ochir", null);
      break;
    case "tahrirla":
      tahrirniBoshla(id);
      tahrirgaOt();
      break;
    case "saqla":
      tahrirniSaqla();
      break;
    case "bekor":
      tahrirniBekorQil();
      break;
  }
});

royxat.addEventListener("keydown", (event) => {
  if (event.target.id !== "tahrir-maydon" || event.isComposing) {
    return;
  }
  if (event.key === "Enter") {
    event.preventDefault();
    tahrirniSaqla();
  } else if (event.key === "Escape") {
    tahrirniBekorQil();
  }
});

filtrlar.addEventListener("click", (event) => {
  const tugma = event.target.closest("[data-filtr]");
  if (tugma === null) {
    return;
  }
  elonQil("");
  filtrniTanla(tugma.dataset.filtr);
});

eksportTugma.addEventListener("click", () => {
  eksportMatn.value = eksportMatni(holat.vazifalar);
  eksportMatn.focus();
  eksportMatn.select();
  elonQil("JSON tayyor. Nusxa olish uchun Ctrl+C bosing.");
});

importTugma.addEventListener("click", () => {
  importXatosiniTozala();
  elonQil("");
  try {
    const malumotlar = paketniOqi(importMatn.value);
    royxatniAlmashtir(malumotlar);
    elonQil(`${malumotlar.length} ta vazifa import qilindi.`);
  } catch (xato) {
    if (xato instanceof VazifaXatosi) {
      importXatosiniKorsat(xato.message);
      return;
    }
    importXatosiniKorsat("Kutilmagan xato: import bajarilmadi.");
    throw xato;
  }
});

// Ishga tushirish
holat.vazifalar.obuna(render);
render();

Access to script at 'file:///C:/Users/Aziz/kurs/vazifalar/assets/js/asosiy.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-experimental-site-token-provider, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

0 []

git add -A
git commit -m "Vazifalar: kodni oltita ES modulga bo'l"