Overview

Parent issue #3499919: [Meta] Plan for in-browser code components
Blocked by

Proposed resolution

Write documentation starting with the issues above in "Blocked by" as the most critical pieces.

Outline to be added.

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

balintbrews
he/him/his
Location Netherlands 🇳🇱
commented
Issue summary: View changes
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: [PP-5] Documentation for code components » [PP-4] Documentation for code components
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Title: [PP-4] Documentation for code components » [PP-3] Documentation for code components

Decrementing PP in issue title since hydration library got in

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Title: [PP-3] Documentation for code components » [PP-1] Documentation for code components

Oh looks like other blockers are also done now, so updating again to reflect

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: [PP-1] Documentation for code components » Documentation for code components
Status: Postponed » Active

#3498889: ComponentSource plugin for code components updated docs/components.md (for the js ComponentSource plugin) and docs/config-management.md (for the JavaScriptComponent config entity).

Unfortunately, #3499933: Storage for CSS shared across in-browser code components (and other use cases in the future) did not update docs/config-management.md (for the AssetLibrary config entity), so that still needs doing here.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +sprint-candidate

Follow-up to #6: #3506424: Loading and auto-saving an edited code component brings two crucial changes to the AssetLibrary config entity worth documenting:

  1. A global AssetLibrary is created during installation, with empty CSS and no JS.
  2. The library_info cache tag is automatically invalidated when saving any AssetLibrary config entity, causing all asset library info across all extensions to be recomputed: https://git.drupalcode.org/project/experience_builder/-/merge_requests/6...
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Priority: Normal » Critical

@effulgentsia came up with a way to patch Astro's code in our bundled hydration library (done in #3500058: Hydration library for code components), and introduce our own type identifier, raw, that allows us to pass values where Astro will work with the value as is. Alex also opened this PR for Astro: https://github.com/withastro/astro/pull/13046.

— issue summary of #3508562: Fix code component prop serialization in Astro islands.

On that PR:

Right now, while we have no specific plans to change the format, we can change it at will without worrying about breaking any other implementation. If you’re manually constructing islands, there’s a risk that it would break in a patch release. Realistically you’d need to be responsible for checking yourself that there are no breaking changes in the format in new releases.

— https://github.com/withastro/astro/pull/13046#issuecomment-2609036184

This seems pretty essential to document! Also: I love that they’re being very explicit about what is their public API vs not! 👏

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

Another MR that landed that merits being documented: the way that import_maps work. See #3507567-12: Make JS files generated from code components import Preact modules with the correct paths for the high-level architecture on the "integrate with existing Drupal infra" side.

balintbrews’s picture

balintbrews
he/him/his
Location Netherlands 🇳🇱
commented
Related issues: +#3508734: Bundle a small selection of packages in the hydration library for code components

Another essential piece to document: #3508734: Bundle a small selection of packages in the hydration library for code components.

We now have packages that can be imported:

import { cva } from "class-variance-authority";
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge'
import { cn } from "@/lib/utils";

Where cn() is this function:
https://git.drupalcode.org/project/experience_builder/-/blob/f3b8c6279c2...

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » balintbrews
Issue tags: -sprint-candidate +sprint

This must happen in the current sprint.

nagwani’s picture

nagwani commented
Issue tags: -sprint

Project: Experience Builder » Drupal Canvas
Version: 0.x-dev » 1.x-dev

Experience Builder has been renamed to Drupal Canvas in preparation for its beta release. You can now track issues on the new project page.

balintbrews’s picture

balintbrews
he/him/his
Location Netherlands 🇳🇱
commented
Assigned: balintbrews » Unassigned
Status: Active » Closed (outdated)
Issue tags: -Needs issue summary update

This happened in #3535089: Move code component starter template documentation from inline comments to online docs .

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.