@blokkli/editor 2.0.0-alpha.27 → 2.0.0-alpha.29

package/dist/runtime/components/Edit/Features/Analyze/Main.vue

@@ -1,385 +0,0 @@
-<template>
-  <div class="bk bk-analyze">
-    <div class="bk-analyze-button">
-      <button
-        v-if="hasManualAnalyzers"
-        class="bk-button bk-is-primary"
-        :disabled="buttonDisabled"
-        @click.prevent="onClick"
-      >
-        {{ $t("analyzeButtonLabel", "Analyze Page") }}
-      </button>
-
-      <p v-if="lastRun" class="bk-analyze-last-run">
-        <RelativeTime v-slot="{ formatted }" :timestamp="lastRun">
-          {{
-            $t("analyzeLastRun", "Last run: @time").replace("@time", formatted)
-          }}
-        </RelativeTime>
-      </p>
-
-      <div v-if="analyzerStatuses.length > 1" class="bk-analyze-statuses">
-        <div
-          v-for="analyzer in analyzerStatuses"
-          :key="analyzer.id"
-          class="bk-analyze-status-item"
-        >
-          <span class="bk-analyze-status-title">{{ analyzer.title }}</span>
-          <span
-            class="bk-analyze-status-label"
-            :class="{ 'bk-is-stale': analyzer.isStale }"
-          >
-            {{ analyzer.status }}
-          </span>
-        </div>
-      </div>
-
-      <p v-if="staleMessage" class="bk-message-info">
-        {{ staleMessage }}
-      </p>
-    </div>
-
-    <div v-if="results.length" class="bk-analyze-wrapper">
-      <div v-if="categoryOptions.length > 2" class="bk-analyze-form">
-        <FormSelect
-          id="category"
-          v-model="selectedCategory"
-          :label="$t('analyzeCategory', 'Category')"
-          :options="categoryOptions"
-        />
-      </div>
-      <AnalyzeSummary :results="results" />
-      <Results v-model="activeId" :results="results" />
-    </div>
-  </div>
-  <Renderer
-    v-if="results.length"
-    v-model="activeId"
-    :results
-    :is-stale
-    :manual-analyzer-ids
-    :is-running
-  />
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  useState,
-  onMounted,
-  onUnmounted,
-  watch
-} from "#imports";
-import Results from "./Results/Results.vue";
-import AnalyzeSummary from "./Summary/index.vue";
-import Renderer from "./Renderer/index.vue";
-import { useAnalyzeHelper } from "./helper";
-import { FormSelect, RelativeTime } from "#blokkli/components";
-import { AnalyzerContext } from "./analyzers/helpers/Context";
-import { normalizeToArray } from "./analyzers/helpers/normalizeArray";
-import { renderCycle } from "#blokkli/helpers/renderCycle";
-const props = defineProps({
-  langcode: { type: String, required: true },
-  analyzers: { type: Array, required: true }
-});
-const ALL = "ALL";
-const { $t, ui, state, directive, dom } = useBlokkli();
-const { getCategoryLabel } = useAnalyzeHelper();
-const refreshKey = computed(() => {
-  return `dom:${dom.settleKey.value}_directive:${directive.settleKey.value}_state:${state.refreshKey.value}`;
-});
-const isRunning = defineModel({ type: Boolean, ...{ default: false } });
-let currentAbortController = null;
-const hasRunOnce = useState(() => false);
-const continuousResults = useState(
-  "blokkli:analyze:continuous",
-  () => []
-);
-const manualResults = useState(
-  "blokkli:analyze:manual",
-  () => []
-);
-const activeId = useState(() => "");
-const lastRun = useState(() => 0);
-const lastRunKey = useState(() => "");
-const selectedCategory = useState(() => ALL);
-const hasInitialized = useState(() => false);
-const providerRootElement = ui.providerElement;
-const continuousAnalyzers = computed(
-  () => props.analyzers.filter((a) => a.continuous)
-);
-const manualAnalyzers = computed(
-  () => props.analyzers.filter((a) => !a.continuous)
-);
-const hasContinuousAnalyzers = computed(
-  () => continuousAnalyzers.value.length > 0
-);
-const hasManualAnalyzers = computed(() => manualAnalyzers.value.length > 0);
-const allResults = computed(() => {
-  const merged = [...continuousResults.value, ...manualResults.value];
-  const mappedResults = [];
-  let currentIndex = 0;
-  for (let i = 0; i < merged.length; i++) {
-    const result = merged[i];
-    if (!result) {
-      continue;
-    }
-    const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
-    const mappedNodes = [];
-    for (let j = 0; j < nodes.length; j++) {
-      const node = nodes[j];
-      if (!node) {
-        continue;
-      }
-      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
-      const mappedTargets = [];
-      for (let k = 0; k < targets.length; k++) {
-        const target = targets[k];
-        if (!target) {
-          continue;
-        }
-        mappedTargets.push({ target, globalIndex: currentIndex });
-        currentIndex++;
-      }
-      mappedNodes.push({
-        ...node,
-        targets: mappedTargets
-      });
-    }
-    mappedResults.push({
-      ...result,
-      plugin: result.pluginId,
-      nodes: mappedNodes
-    });
-  }
-  return mappedResults;
-});
-const results = computed(() => {
-  if (selectedCategory.value === ALL) {
-    return allResults.value;
-  }
-  return allResults.value.filter((v) => v.category === selectedCategory.value);
-});
-const isStale = computed(() => lastRunKey.value !== state.refreshKey.value);
-const buttonDisabled = computed(() => {
-  if (isRunning.value) {
-    return true;
-  }
-  if (!isStale.value) {
-    return false;
-  }
-  return false;
-});
-const staleMessage = computed(() => {
-  if (hasManualAnalyzers.value && manualResults.value.length === 0) {
-    return $t(
-      "analyzeClickButton",
-      "Click the button above to run the analysis."
-    );
-  }
-  if (hasManualAnalyzers.value && isStale.value) {
-    return $t(
-      "analyzeResultsOutdated",
-      "Results are outdated. Click the button to update."
-    );
-  }
-  return "";
-});
-const analyzerStatuses = computed(() => {
-  if (!hasRunOnce.value) {
-    return [];
-  }
-  return props.analyzers.map((analyzer) => {
-    const status = analyzer.continuous ? $t("analyzeStatusUpToDate", "Up-to-date") : isStale.value ? $t("analyzeStatusStale", "Stale") : $t("analyzeStatusUpToDate", "Up-to-date");
-    const title = typeof analyzer.label === "function" ? analyzer.label(ui.interfaceLanguage.value) : analyzer.label;
-    return {
-      id: analyzer.id,
-      title: title ?? analyzer.id,
-      status,
-      isStale: !analyzer.continuous && isStale.value
-    };
-  });
-});
-const manualAnalyzerIds = computed(
-  () => new Set(manualAnalyzers.value.map((a) => a.id))
-);
-let refreshTimeout = null;
-watch(refreshKey, () => {
-  if (!hasContinuousAnalyzers.value) {
-    return;
-  }
-  if (currentAbortController) {
-    currentAbortController.abort("refreshKey updated");
-  }
-  if (refreshTimeout) {
-    window.clearTimeout(refreshTimeout);
-  }
-  isRunning.value = true;
-  refreshTimeout = window.setTimeout(() => {
-    runContinuous();
-  }, 100);
-});
-onUnmounted(() => {
-  if (currentAbortController) {
-    currentAbortController.abort("refreshKey updated");
-    currentAbortController = null;
-  }
-});
-function getContext(signal) {
-  return new AnalyzerContext(
-    props.langcode,
-    ui.interfaceLanguage.value,
-    providerRootElement,
-    state,
-    $t,
-    signal
-  );
-}
-async function runContinuous() {
-  if (!continuousAnalyzers.value.length) {
-    return;
-  }
-  if (currentAbortController) {
-    currentAbortController.abort("refreshKey updated");
-  }
-  const abortController = new AbortController();
-  currentAbortController = abortController;
-  isRunning.value = true;
-  let wasAborted = false;
-  try {
-    const context = getContext(abortController.signal);
-    if (!hasInitialized.value) {
-      await Promise.all(
-        props.analyzers.map(async (analyzer) => {
-          if (analyzer.init) {
-            await analyzer.init(context);
-          }
-        })
-      );
-      hasInitialized.value = true;
-    }
-    if (abortController.signal.aborted) {
-      wasAborted = true;
-      return;
-    }
-    const newResults = [];
-    for (let i = 0; i < continuousAnalyzers.value.length; i++) {
-      if (abortController.signal.aborted) {
-        wasAborted = true;
-        return;
-      }
-      const analyzer = continuousAnalyzers.value[i];
-      const result = (await normalizeToArray(analyzer.run(context))).map(
-        (v) => {
-          return {
-            ...v,
-            pluginId: analyzer.id
-          };
-        }
-      );
-      newResults.push(...result);
-    }
-    if (abortController.signal.aborted) {
-      wasAborted = true;
-      return;
-    }
-    continuousResults.value = newResults;
-    hasRunOnce.value = true;
-    lastRun.value = Date.now() / 1e3;
-  } catch (error) {
-    if (error instanceof Error && error.name === "AbortError") {
-      wasAborted = true;
-      return;
-    }
-    throw error;
-  } finally {
-    if (currentAbortController === abortController) {
-      currentAbortController = null;
-      if (!wasAborted) {
-        isRunning.value = false;
-      }
-    }
-  }
-}
-async function onClick() {
-  if (isRunning.value) {
-    return;
-  }
-  const requiresRawPage = manualAnalyzers.value.some(
-    (analyzer) => analyzer.requireRawPage
-  );
-  if (requiresRawPage) {
-    ui.isAnalyzing.value = true;
-  }
-  isRunning.value = true;
-  await renderCycle();
-  const currentRefreshKey = state.refreshKey.value;
-  try {
-    const context = getContext();
-    if (!hasInitialized.value) {
-      await Promise.all(
-        props.analyzers.map(async (analyzer) => {
-          if (analyzer.init) {
-            await analyzer.init(context);
-          }
-        })
-      );
-    }
-    hasInitialized.value = true;
-    const newManualResults = [];
-    for (let i = 0; i < manualAnalyzers.value.length; i++) {
-      const analyzer = manualAnalyzers.value[i];
-      const result = (await normalizeToArray(analyzer.run(context))).map(
-        (v) => {
-          return {
-            ...v,
-            pluginId: analyzer.id
-          };
-        }
-      );
-      newManualResults.push(...result);
-    }
-    manualResults.value = newManualResults;
-    hasRunOnce.value = true;
-    lastRun.value = Date.now() / 1e3;
-    if (state.refreshKey.value === currentRefreshKey) {
-      lastRunKey.value = currentRefreshKey;
-    }
-  } catch (error) {
-    if (error instanceof Error && error.name === "AbortError") {
-      return;
-    }
-    throw error;
-  } finally {
-    isRunning.value = false;
-    if (requiresRawPage) {
-      ui.isAnalyzing.value = false;
-    }
-  }
-}
-const categoryOptions = computed(() => {
-  const set = allResults.value.reduce((acc, v) => {
-    acc.add(v.category);
-    return acc;
-  }, /* @__PURE__ */ new Set());
-  const categories = [...set.values()].map((value) => {
-    return {
-      value,
-      label: getCategoryLabel(value)
-    };
-  });
-  return [
-    {
-      value: ALL,
-      label: $t("all", "All")
-    },
-    ...categories
-  ];
-});
-onMounted(async () => {
-  if (hasContinuousAnalyzers.value) {
-    await runContinuous();
-  }
-});
-</script>

package/dist/runtime/components/Edit/Features/Analyze/Main.vue.d.ts

@@ -1,14 +0,0 @@
-import type { Analyzer } from './analyzers/types.js';
-type __VLS_Props = {
-    langcode: string;
-    analyzers: Analyzer[];
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Renderer/index.vue

@@ -1,260 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import { useBlokkli, computed, watch } from "#imports";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
-import vs from "./vertex.glsl?raw";
-import fs from "./fragment.glsl?raw";
-import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
-import { toShaderColor } from "#blokkli/helpers";
-const props = defineProps({
-  results: { type: Array, required: true },
-  isStale: { type: Boolean, required: true },
-  isRunning: { type: Boolean, required: true },
-  manualAnalyzerIds: { type: Set, required: true }
-});
-const { animation, ui, theme, selection, element, dom, blocks } = useBlokkli();
-const activeId = defineModel({ type: String, ...{
-  default: ""
-} });
-const statusPriority = {
-  violation: 3,
-  incomplete: 2,
-  pass: 1,
-  inapplicable: 0
-};
-const nodes = computed(() => {
-  const mappedNodes = [];
-  for (let i = 0; i < props.results.length; i++) {
-    const result = props.results[i];
-    if (!result) {
-      continue;
-    }
-    if (result.status !== "incomplete" && result.status !== "violation") {
-      continue;
-    }
-    for (let j = 0; j < result.nodes.length; j++) {
-      const node = result.nodes[j];
-      if (!node) {
-        continue;
-      }
-      for (let k = 0; k < node.targets.length; k++) {
-        const target = node.targets[k];
-        if (!target) {
-          continue;
-        }
-        let targetElement = null;
-        if (typeof target.target === "string") {
-          targetElement = element.query(
-            ui.providerElement,
-            target.target,
-            "Find analyze node target element."
-          );
-        } else if (target.target instanceof HTMLElement) {
-          targetElement = target.target;
-        } else {
-          const item = blocks.getBlock(target.target.uuid);
-          if (item) {
-            targetElement = dom.getDragElement(item) ?? null;
-          }
-        }
-        if (targetElement) {
-          mappedNodes.push({
-            id: result.id,
-            element: targetElement,
-            index: target.globalIndex,
-            title: result.title,
-            status: result.status,
-            plugin: result.plugin
-          });
-        }
-      }
-    }
-  }
-  const nodeMap = /* @__PURE__ */ new Map();
-  for (const node of mappedNodes) {
-    const existing = nodeMap.get(node.element);
-    if (!existing || statusPriority[node.status] > statusPriority[existing.status]) {
-      nodeMap.set(node.element, node);
-    }
-  }
-  const finalNodes = Array.from(nodeMap.values());
-  return finalNodes;
-});
-const activeRectId = computed(() => {
-  if (!activeId.value) {
-    return -1;
-  }
-  for (let i = 0; i < nodes.value.length; i++) {
-    const node = nodes.value[i];
-    const id = node.id + "_____" + node.index;
-    if (activeId.value === id) {
-      return i;
-    }
-  }
-  return -1;
-});
-class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
-  prevKey = "";
-  rectCache = /* @__PURE__ */ new Map();
-  clearCache() {
-    this.rectCache.clear();
-    this.prevKey = "";
-  }
-  getBufferInfo(gl, force) {
-    const key = nodes.value.map((node, index) => {
-      if (!this.rectCache.has(node.element)) {
-        const rect2 = ui.getAbsoluteElementRect(node.element);
-        this.rectCache.set(node.element, rect2);
-      }
-      const rect = this.rectCache.get(node.element);
-      if (!rect) {
-        return `${index}_no_rect`;
-      }
-      return `${index}_${rect.x}_${rect.y}_${rect.width}_${rect.height}_${node.status}`;
-    }).join("_");
-    const hasChanged = force || this.prevKey !== key;
-    if (hasChanged) {
-      this.reset();
-      for (let i = 0; i < nodes.value.length; i++) {
-        const node = nodes.value[i];
-        const id = `analyze_${i}`;
-        if (this.added.has(id)) {
-          continue;
-        }
-        const rect = this.rectCache.get(node.element);
-        if (!rect) {
-          continue;
-        }
-        this.added.add(id);
-        const isManual = props.manualAnalyzerIds.has(node.plugin);
-        const statusType = node.status === "violation" ? isManual ? 0 : 1 : isManual ? 2 : 3;
-        this.addRectangle(
-          {
-            id,
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            status: node.status,
-            plugin: node.plugin,
-            nodeIndex: node.index
-          },
-          statusType
-        );
-      }
-      this.prevKey = key;
-    }
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
-    }
-    return { info: this.bufferInfo, hasChanged };
-  }
-}
-function getOpacity() {
-  return props.isRunning ? 0.3 : 1;
-}
-const { collector } = defineRenderer("analyze-overlay", {
-  zIndex: 500,
-  collector: () => new AnalyzeRectangleBufferCollector(),
-  program: () => ({ shaders: [vs, fs] }),
-  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value && !selection.isChangingOptions.value,
-  render: (_ctx, gl, program) => {
-    gl.useProgram(program.program);
-    const { info } = collector.getBufferInfo(gl);
-    if (!info) {
-      return;
-    }
-    setUniforms(program, {
-      u_color_violation: toShaderColor(theme.red.value.normal),
-      u_color_incomplete: toShaderColor(theme.yellow.value.normal),
-      u_opacity: getOpacity(),
-      u_manual_stale: props.isStale ? 1 : 0,
-      u_active_id: activeRectId.value
-    });
-    animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, info);
-    drawBufferInfo(gl, info, gl.TRIANGLES);
-  },
-  renderFallback: (ctx, ctx2d) => {
-    collector.getBufferInfo();
-    const rects = Object.values(collector.rects);
-    if (rects.length === 0) {
-      return;
-    }
-    const rgbaToCss = (rgb, alpha) => {
-      return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
-    };
-    const globalOpacity = getOpacity();
-    const borderRadius = 8 * ctx.dpi;
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      const isManual = props.manualAnalyzerIds.has(rect.plugin);
-      const finalOpacity = isManual && props.isStale ? 0.3 : globalOpacity;
-      const fillAlpha = 0.3 * finalOpacity;
-      const baseColor = rect.status === "violation" ? theme.red.value.normal : theme.yellow.value.normal;
-      const fillColor = rgbaToCss(baseColor, fillAlpha);
-      const x = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
-      const y = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
-      const width = rect.width * ctx.artboardScale * ctx.dpi;
-      const height = rect.height * ctx.artboardScale * ctx.dpi;
-      ctx2d.fillStyle = fillColor;
-      ctx2d.beginPath();
-      ctx2d.roundRect(x, y, width, height, borderRadius);
-      ctx2d.fill();
-    }
-  }
-});
-onBlokkliEvent("ui:resized", function() {
-  collector.clearCache();
-  collector.reset();
-});
-onBlokkliEvent("option:finish-change", () => {
-  collector.clearCache();
-  collector.reset();
-});
-watch(
-  () => props.results,
-  () => {
-    collector.clearCache();
-    collector.reset();
-  }
-);
-onBlokkliEvent("mouse:up", (e) => {
-  const artboardX = (e.x - ui.artboardOffset.value.x) / ui.artboardScale.value;
-  const artboardY = (e.y - ui.artboardOffset.value.y) / ui.artboardScale.value;
-  for (let i = 0; i < nodes.value.length; i++) {
-    const node = nodes.value[i];
-    const rect = collector.rectCache.get(node.element);
-    if (!rect) {
-      continue;
-    }
-    if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
-      const id = node.id + "_____" + node.index;
-      if (activeId.value === id) {
-        activeId.value = "";
-      } else {
-        activeId.value = id;
-      }
-      return;
-    }
-  }
-});
-onBlokkliEvent("window:clickAway", () => {
-  activeId.value = "";
-});
-</script>
-
-<script>
-export default {
-  name: "AnalyzeOverlay"
-};
-</script>

package/dist/runtime/components/Edit/Features/Analyze/Renderer/index.vue.d.ts

@@ -1,21 +0,0 @@
-import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
-declare const _default: import("vue").DefineComponent<{
-    results: AnalyzeResultMapped[];
-    isStale: boolean;
-    isRunning: boolean;
-    manualAnalyzerIds: Set<string>;
-} & {
-    modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    results: AnalyzeResultMapped[];
-    isStale: boolean;
-    isRunning: boolean;
-    manualAnalyzerIds: Set<string>;
-} & {
-    modelValue?: string;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;