tc39 / tc39/ecmarkup

Change emu-table to use CSS grid to make them less verbose

Open
#152 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
245
Forks
80
Avg merge
10h 46m
Merged PRs (30d)
2

Description

Currently a table looks like:

<emu-table id="table-2" caption="Attributes of a Data Property">
    <table>
    <tbody>
    <tr>
        <th>
        Attribute Name
        </th>
        <th>
        Value Domain
        </th>
        <th>
        Description
        </th>
    </tr>
    <tr>
        <td>
        [[Value]]
        </td>
        <td>
        Any ECMAScript language type
        </td>
        <td>
        The value retrieved by a get access of the property.
        </td>
    </tr>
    <tr>
        <td>
        [[Writable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.
        </td>
    </tr>
    <tr>
        <td>
        [[Enumerable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.
        </td>
    </tr>
    <tr>
        <td>
        [[Configurable]]
        </td>
        <td>
        Boolean
        </td>
        <td>
        If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.
        </td>
    </tr>
    </tbody>
    </table>
</emu-table>

A CSS grid would look like:

<emu-table id="table-2" caption="Attributes of a Data Property">
  <emu-th>Attribute Name</emu-th>
  <emu-th>Value Domain</emu-th>
  <emu-th>Description</emu-th>

  <emu-td>[[Value]]</emu-td>
  <emu-td>Any ECMAScript language type</emu-td>
  <emu-td>The value retrieved by a get access of the property.</emu-td>

  <emu-td>[[Writable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.</emu-td>

  <emu-td>[[Enumerable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.</emu-td>

  <emu-td>[[Configurable]]</emu-td>
  <emu-td>Boolean</emu-td>
  <emu-td>If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.</emu-td>
</emu-table>

The <emu-th> would define the number of columns.

I've been adding a bunch of stuff to tables and this would make things look clean.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files or tests. Start by locating the emu-table handling and the styles that render its contents, then verify how emu-th and emu-td can define the columns. Done means the compact syntax in the example renders the same table using CSS grid.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
documentation
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.