├── .nvmrc
├── test
├── stubs
│ ├── empty.webc
│ ├── style.webc
│ ├── comment.webc
│ ├── img.webc
│ ├── issue-152
│ │ ├── parent-nohtml.webc
│ │ ├── child.webc
│ │ └── parent.webc
│ ├── components
│ │ ├── nested-child-empty.webc
│ │ ├── nested-child.webc
│ │ ├── img-plain.webc
│ │ ├── component-data.webc
│ │ ├── child-circular.webc
│ │ ├── child-circular2.webc
│ │ ├── img-as-root.webc
│ │ ├── nested-child-slot-before-after.webc
│ │ ├── nested-child-style-only.webc
│ │ ├── script-html.webc
│ │ ├── nested-child-script.webc
│ │ ├── nested-child-slot.webc
│ │ ├── nested-child-style.webc
│ │ ├── html-evaluating-props-nothis.webc
│ │ ├── html-evaluating-props.webc
│ │ ├── img-props.webc
│ │ ├── nested-child-style-script-both-empty.webc
│ │ ├── with-uid.webc
│ │ ├── child-root-empty-class.webc
│ │ ├── nested-child-style-keep.webc
│ │ ├── nested-child-namedslot.webc
│ │ ├── assets.webc
│ │ ├── with-uid-root.webc
│ │ ├── child-root.webc
│ │ ├── nested-child-slot-style.webc
│ │ ├── scoped-style.webc
│ │ ├── text-link-slot.webc
│ │ ├── child-css-js-a.webc
│ │ ├── child-css-js-b.webc
│ │ ├── child-css-js-c.webc
│ │ ├── child-css-js-d.webc
│ │ ├── child-css-js-e.webc
│ │ ├── child-css-js-f.webc
│ │ ├── root-style.webc
│ │ ├── scoped-override.webc
│ │ ├── override-parent.webc
│ │ ├── nested-child-namedslot-style.webc
│ │ ├── scoped-override-collision-b.webc
│ │ ├── img.webc
│ │ ├── scoped-override-collision-a.webc
│ │ ├── shadowroot.webc
│ │ ├── override-parent-scoped.webc
│ │ ├── render-slots.webc
│ │ ├── shadowrootmode.webc
│ │ ├── render-css-keep.webc
│ │ ├── render-css-root.webc
│ │ ├── render-css.webc
│ │ ├── render-slots-raw.webc
│ │ ├── render-css-root-override.webc
│ │ └── clientside.webc
│ ├── issue-80-b
│ │ ├── c.webc
│ │ ├── page.webc
│ │ └── b.webc
│ ├── issue-80
│ │ ├── c.webc
│ │ ├── page.webc
│ │ └── b.webc
│ ├── slot.webc
│ ├── component-in-page-mode.webc
│ ├── issue-135
│ │ ├── page.webc
│ │ └── component.webc
│ ├── no-template.webc
│ ├── externals
│ │ ├── my-style.css
│ │ ├── my-style-scoped.css
│ │ ├── my-script.js
│ │ ├── externals-scoped.webc
│ │ ├── externals.webc
│ │ ├── externals-dynamic.webc
│ │ ├── externals-keep.webc
│ │ ├── externals-urls.webc
│ │ └── externals-urls-keep.webc
│ ├── issue-118
│ │ ├── oh-no.webc
│ │ └── page.webc
│ ├── sample-require.cjs
│ ├── global-components
│ │ ├── subfolder
│ │ │ └── my-custom-element.webc
│ │ ├── my-custom-element.webc
│ │ └── other-custom-element.webc
│ ├── html-number.webc
│ ├── attrs-dashes
│ │ ├── component-attrs.webc
│ │ └── my-component.webc
│ ├── component-script-html.webc
│ ├── issue-105
│ │ ├── test-p.webc
│ │ └── test.js
│ ├── issue-98
│ │ ├── component.webc
│ │ └── page.webc
│ ├── slot-unused.webc
│ ├── issue-104
│ │ ├── root-attrs-component.webc
│ │ ├── attrs-component.webc
│ │ ├── attrs-object.webc
│ │ ├── root-component.webc
│ │ ├── root-override-attrs-component.webc
│ │ ├── component.webc
│ │ ├── component-context.webc
│ │ └── setup-component.webc
│ ├── issue-78
│ │ ├── a-component.webc
│ │ ├── add-banner-to-css-root.webc
│ │ ├── add-banner-to-css.webc
│ │ ├── add-banner-to-css-render.webc
│ │ ├── img.webc
│ │ └── page.webc
│ ├── issue-91
│ │ ├── img.webc
│ │ └── page.webc
│ ├── nested-link.webc
│ ├── component-html-resolve.webc
│ ├── dynamic-bucket
│ │ ├── index.webc
│ │ └── component.webc
│ ├── empty-class.webc
│ ├── issue-79
│ │ ├── components
│ │ │ ├── other-component.webc
│ │ │ └── my-component.webc
│ │ └── pages
│ │ │ └── articles
│ │ │ └── my-page.webc
│ ├── looping
│ │ ├── components
│ │ │ ├── card-header.webc
│ │ │ ├── component.webc
│ │ │ ├── card-actions.webc
│ │ │ ├── card-thing.webc
│ │ │ └── card-content.webc
│ │ ├── issue-139.webc
│ │ ├── array-value.webc
│ │ ├── array.webc
│ │ ├── object-key.webc
│ │ ├── scoped-data.webc
│ │ ├── array-object-keys.webc
│ │ ├── array-object-values.webc
│ │ ├── object.webc
│ │ ├── script-setup-data.webc
│ │ └── complex
│ │ │ ├── entry-point.webc
│ │ │ └── data.js
│ ├── nested.webc
│ ├── slot-fallback-content.webc
│ ├── slot-named.webc
│ ├── bucket-inherit
│ │ ├── index.webc
│ │ ├── child.webc
│ │ └── component.webc
│ ├── component-html-assets.webc
│ ├── template.webc
│ ├── slot-keep.webc
│ ├── slot-raw.webc
│ ├── template-custom.webc
│ ├── if-component-style.webc
│ ├── img-to-img.webc
│ ├── nested-webc-raw.webc
│ ├── slot-unused-default.webc
│ ├── nested-alias.webc
│ ├── nested-content.webc
│ ├── nested-webc-keep.webc
│ ├── plaintext-transform.webc
│ ├── script-type.webc
│ ├── slot-named-fallback.webc
│ ├── template-custom-keep.webc
│ ├── template-custom-notype.webc
│ ├── using-css-keep.webc
│ ├── using-css-root.webc
│ ├── using-css.webc
│ ├── class-mixins.webc
│ ├── global-data.webc
│ ├── props-missing.webc
│ ├── setup-script
│ │ ├── import-target.js
│ │ ├── component.webc
│ │ └── test.js
│ ├── style-merge.webc
│ ├── slot-nested-2.webc
│ ├── slot-nested-3.webc
│ ├── slot-nested.webc
│ ├── slot-unused-2.webc
│ ├── scoped.webc
│ ├── using-css-root-override.webc
│ ├── using-img.webc
│ ├── import-alias-nested.webc
│ ├── props-versus-text
│ │ └── page.webc
│ ├── using-uid.webc
│ ├── webc-raw-prop.webc
│ ├── deep-root
│ │ └── component.webc
│ ├── issue-138
│ │ ├── page.webc
│ │ └── img.webc
│ ├── nested-content-with-attr.webc
│ ├── props-missing-nothis.webc
│ ├── scoped-override.webc
│ ├── using-img-plain.webc
│ ├── bucket-noinherit
│ │ ├── component.webc
│ │ └── index.webc
│ ├── dynamic-attributes-host-component-data
│ │ ├── lol.webc
│ │ └── page.webc
│ ├── issue-156
│ │ └── link.webc
│ ├── nested-reference.webc
│ ├── alias-paragraph.webc
│ ├── bucket-inherit-attrs
│ │ ├── component.webc
│ │ └── index.webc
│ ├── import-keep.webc
│ ├── webc-raw-html-prop.webc
│ ├── nested-twice.webc
│ ├── template-custom-nested.webc
│ ├── nested-alias-reference.webc
│ ├── head
│ │ ├── head.webc
│ │ ├── custom-head.webc
│ │ ├── meta.webc
│ │ └── head-is-component.webc
│ ├── issue-3
│ │ ├── page.webc
│ │ └── my-article.webc
│ ├── render-slots-parent.webc
│ ├── props.webc
│ ├── import-alias-suffix.webc
│ ├── import-alias.webc
│ ├── issue-154
│ │ ├── c-red.webc
│ │ ├── c-blue.webc
│ │ └── page.webc
│ ├── issue-67
│ │ ├── meta-social.webc
│ │ └── page.webc
│ ├── import-alias-nested-quickstart.webc
│ ├── issue-175
│ │ └── c-data-table.webc
│ ├── nested-no-shadowdom.webc
│ ├── render-child-component.webc
│ ├── two-style.webc
│ ├── render.webc
│ ├── render2.webc
│ ├── import-twice.webc
│ ├── defined-style-noroot.webc
│ ├── render-async.webc
│ ├── render-async2.webc
│ ├── render-raw.webc
│ ├── render3.webc
│ ├── defined-style.webc
│ ├── issue-94
│ │ └── component.webc
│ ├── components-order.webc
│ ├── asset-buckets.webc
│ ├── issue-208
│ │ └── page.webc
│ ├── html.webc
│ ├── scoped-override-collisions.webc
│ ├── scoped-top.webc
│ ├── style-override.webc
│ ├── render-raw-nokeep.webc
│ ├── issue-85
│ │ └── page.webc
│ ├── page.webc
│ ├── components-list.webc
│ ├── nested-multiple-slots.webc
│ ├── page-capital-doctype-issue-24.webc
│ ├── attribute-quotes.webc
│ ├── fake_node_modules
│ │ └── @11ty
│ │ │ └── test
│ │ │ └── syntax-highlighter.webc
│ ├── nested-multiple-slots-raw.webc
│ ├── issue-115
│ │ └── page.webc
│ ├── props-no-this.webc
│ ├── render-import.webc
│ ├── render-require.webc
│ ├── render-js-import.webc
│ └── render-setup-import.webc
├── comments-test.js
├── issue-85-test.js
├── issue-94-test.js
├── props-versus-text-test.js
├── issue-135-test.js
├── issue-84-test.js
├── issue-138-test.js
├── issue-79-test.js
├── issue-98-test.js
├── issue-118-test.js
├── issue-91-test.js
├── issue-115-test.js
├── issue-83-test.js
├── issue-145-test.js
├── issue-156-test.js
├── issue-154-test.js
├── issue-80-test.js
├── issue-attrs-dashes-test.js
├── issue-88-test.js
├── shadowdom-test.js
├── classAttributeTest.js
├── attributeSerializerTest.js
├── issue-208-test.js
├── globalComponentsTest.js
├── issue-152-test.js
├── scoped-type-js-test.js
├── moduleResolutionTest.js
├── issue-104-test.js
├── issue-78-test.js
├── renderFunctionJsTest.js
├── cssTest.js
├── looping-test.js
└── contentPropsTest.js
├── .gitignore
├── .npmignore
├── examples
├── aggregation
│ ├── page.webc
│ ├── components
│ │ └── my-component.webc
│ └── page.js
├── attributes
│ ├── page.webc
│ ├── components
│ │ └── my-component.webc
│ └── page.js
├── imports
│ ├── components
│ │ ├── my-component.webc
│ │ ├── my-dynamic-component.webc
│ │ └── my-remapped-component.webc
│ ├── page.webc
│ └── page.js
├── properties
│ ├── components
│ │ └── my-component.webc
│ ├── page.webc
│ └── page.js
├── lookup-attributes
│ ├── components
│ │ └── my-component.webc
│ ├── page.webc
│ └── page.js
├── scoped-css
│ ├── page.webc
│ ├── components
│ │ ├── my-component.webc
│ │ └── my-component-prefixed.webc
│ └── page.js
├── custom-transforms
│ ├── package.json
│ ├── page.js
│ └── page.webc
├── helpers
│ ├── page.webc
│ └── page.js
├── raw
│ ├── page.webc
│ └── page.js
├── render
│ ├── components
│ │ ├── add-banner-to-css.webc
│ │ └── img.webc
│ ├── page.webc
│ └── page.js
├── html
│ ├── page.webc
│ └── page.js
├── page
│ ├── page.js
│ └── page.webc
├── slots
│ ├── page.js
│ ├── components
│ │ └── my-component.webc
│ └── page.webc
└── stream
│ ├── page.webc
│ └── page.js
├── .gitattributes
├── .editorconfig
├── src
├── astCache.js
├── path.js
├── astModify.js
├── dynamicScript.js
├── streams.js
├── fsCache.js
├── looping.js
├── dataCascade.js
├── moduleResolution.js
├── assetManager.js
├── css.js
├── astQuery.js
├── componentManager.js
└── attributeSerializer.js
├── .github
└── workflows
│ ├── ci.yml
│ └── release.yml
├── LICENSE
├── package.json
└── webc.js
/.nvmrc:
--------------------------------------------------------------------------------
1 | 22
--------------------------------------------------------------------------------
/test/stubs/empty.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/style.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/comment.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/img.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | playground
3 | .idea
4 |
--------------------------------------------------------------------------------
/test/stubs/component-in-page-mode.webc:
--------------------------------------------------------------------------------
1 | Test
--------------------------------------------------------------------------------
/test/stubs/components/nested-child.webc:
--------------------------------------------------------------------------------
1 | SSR content
--------------------------------------------------------------------------------
/test/stubs/issue-135/page.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test
2 | playground
3 | examples
4 | .*
5 |
--------------------------------------------------------------------------------
/test/stubs/components/img-plain.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-152/parent.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/component-script-html.webc:
--------------------------------------------------------------------------------
1 | I am an HTML-only component
--------------------------------------------------------------------------------
/test/stubs/issue-98/component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/slot-unused.webc:
--------------------------------------------------------------------------------
1 | Text
--------------------------------------------------------------------------------
/examples/aggregation/page.webc:
--------------------------------------------------------------------------------
1 | Default slot
--------------------------------------------------------------------------------
/test/stubs/components/component-data.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-104/root-attrs-component.webc:
--------------------------------------------------------------------------------
1 | Parent Child
--------------------------------------------------------------------------------
/test/stubs/component-html-resolve.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/components/child-circular.webc:
--------------------------------------------------------------------------------
1 | test
--------------------------------------------------------------------------------
/test/stubs/dynamic-bucket/index.webc:
--------------------------------------------------------------------------------
1 | Light dom
--------------------------------------------------------------------------------
/test/stubs/global-components/my-custom-element.webc:
--------------------------------------------------------------------------------
1 | This is a global component.
--------------------------------------------------------------------------------
/test/stubs/issue-104/attrs-component.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/issue-104/attrs-object.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/looping/components/card-header.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/nested.webc:
--------------------------------------------------------------------------------
1 | Before
2 | Fallback content
--------------------------------------------------------------------------------
/test/stubs/slot-named.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/bucket-inherit/index.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/issue-98/page.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/test/stubs/components/nested-child-script.webc:
--------------------------------------------------------------------------------
1 | SSR content
--------------------------------------------------------------------------------
/test/stubs/components/nested-child-slot.webc:
--------------------------------------------------------------------------------
1 | SSR contentFallback content
--------------------------------------------------------------------------------
/test/stubs/slot-raw.webc:
--------------------------------------------------------------------------------
1 | Fallback content
--------------------------------------------------------------------------------
/test/stubs/template-custom.webc:
--------------------------------------------------------------------------------
1 |
2 | # Header
3 |
--------------------------------------------------------------------------------
/test/stubs/components/html-evaluating-props-nothis.webc:
--------------------------------------------------------------------------------
1 | Text
--------------------------------------------------------------------------------
/examples/attributes/page.webc:
--------------------------------------------------------------------------------
1 | This is the default slot
--------------------------------------------------------------------------------
/examples/imports/components/my-component.webc:
--------------------------------------------------------------------------------
1 | Components don’t need a root element, y’all.
2 |
--------------------------------------------------------------------------------
/examples/properties/components/my-component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-118/page.webc:
--------------------------------------------------------------------------------
1 | Testing. Child content
3 | After
--------------------------------------------------------------------------------
/test/stubs/nested-webc-keep.webc:
--------------------------------------------------------------------------------
1 | Before
2 | Testing
--------------------------------------------------------------------------------
/test/stubs/script-type.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/imports/components/my-dynamic-component.webc:
--------------------------------------------------------------------------------
1 | This other component is dynamically imported!!!
--------------------------------------------------------------------------------
/examples/imports/components/my-remapped-component.webc:
--------------------------------------------------------------------------------
1 | And this other component is a remapped component!
--------------------------------------------------------------------------------
/examples/lookup-attributes/components/my-component.webc:
--------------------------------------------------------------------------------
1 | SSR content
--------------------------------------------------------------------------------
/test/stubs/components/nested-child-style-keep.webc:
--------------------------------------------------------------------------------
1 | SSR content
--------------------------------------------------------------------------------
/test/stubs/slot-named-fallback.webc:
--------------------------------------------------------------------------------
1 | Fallback content
--------------------------------------------------------------------------------
/test/stubs/template-custom-keep.webc:
--------------------------------------------------------------------------------
1 |
2 | # Header
3 |
--------------------------------------------------------------------------------
/test/stubs/template-custom-notype.webc:
--------------------------------------------------------------------------------
1 |
2 | No content.
3 |
--------------------------------------------------------------------------------
/test/stubs/using-css-keep.webc:
--------------------------------------------------------------------------------
1 | TextText
--------------------------------------------------------------------------------
/test/stubs/slot-nested-3.webc:
--------------------------------------------------------------------------------
1 | TextText
--------------------------------------------------------------------------------
/test/stubs/slot-nested.webc:
--------------------------------------------------------------------------------
1 | TextText
--------------------------------------------------------------------------------
/test/stubs/slot-unused-2.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/lookup-attributes/page.webc:
--------------------------------------------------------------------------------
1 | Say hello
--------------------------------------------------------------------------------
/test/stubs/scoped.webc:
--------------------------------------------------------------------------------
1 | Light dom content
--------------------------------------------------------------------------------
/test/stubs/using-css-root-override.webc:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/test/stubs/components/with-uid-root.webc:
--------------------------------------------------------------------------------
1 |
2 | SSR content
3 |
--------------------------------------------------------------------------------
/test/stubs/components/nested-child-slot-style.webc:
--------------------------------------------------------------------------------
1 | SSR contentDefault link text Some component content
--------------------------------------------------------------------------------
/test/stubs/issue-138/page.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/array.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/object-key.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/scoped-data.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/nested-content-with-attr.webc:
--------------------------------------------------------------------------------
1 | Before
2 | Child content
3 | After
--------------------------------------------------------------------------------
/test/stubs/props-missing-nothis.webc:
--------------------------------------------------------------------------------
1 | Light dom content
--------------------------------------------------------------------------------
/test/stubs/using-img-plain.webc:
--------------------------------------------------------------------------------
1 | Test
--------------------------------------------------------------------------------
/test/stubs/issue-156/link.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-79/components/my-component.webc:
--------------------------------------------------------------------------------
1 |
2 | Some component content
3 |
--------------------------------------------------------------------------------
/examples/scoped-css/page.webc:
--------------------------------------------------------------------------------
1 | Default slot
2 | Prefixed slot
--------------------------------------------------------------------------------
/test/stubs/alias-paragraph.webc:
--------------------------------------------------------------------------------
1 | Before
2 | This is a paragraph—we still cool?
3 | After
--------------------------------------------------------------------------------
/test/stubs/bucket-inherit-attrs/component.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/components/child-css-js-a.webc:
--------------------------------------------------------------------------------
1 | Before
2 | SSR content
3 |
--------------------------------------------------------------------------------
/test/stubs/import-keep.webc:
--------------------------------------------------------------------------------
1 | Before
2 |
--------------------------------------------------------------------------------
/test/stubs/webc-raw-html-prop.webc:
--------------------------------------------------------------------------------
1 |
2 |
2 | Leave me out of this.
3 |
6 |
--------------------------------------------------------------------------------
/test/stubs/components/scoped-override.webc:
--------------------------------------------------------------------------------
1 |
6 |
3 | Child content
4 |
6 | After
--------------------------------------------------------------------------------
/test/stubs/template-custom-nested.webc:
--------------------------------------------------------------------------------
1 |
2 | # Header
3 |
4 | # Header Test
5 |
--------------------------------------------------------------------------------
/test/stubs/components/override-parent.webc:
--------------------------------------------------------------------------------
1 | SSR content
2 |
--------------------------------------------------------------------------------
/test/stubs/looping/array-object-values.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/object.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/externals/externals-scoped.webc:
--------------------------------------------------------------------------------
1 | This is another global component.
2 | This is a title
5 |
--------------------------------------------------------------------------------
/test/stubs/issue-3/page.webc:
--------------------------------------------------------------------------------
1 |
2 | Article Title
3 | Subtitle
4 | Content
5 |
--------------------------------------------------------------------------------
/test/stubs/looping/script-setup-data.webc:
--------------------------------------------------------------------------------
1 |
4 | This is content
--------------------------------------------------------------------------------
/examples/properties/page.webc:
--------------------------------------------------------------------------------
1 | This is a paragraph—we still cool?
3 | After
--------------------------------------------------------------------------------
/test/stubs/import-alias.webc:
--------------------------------------------------------------------------------
1 | Before
2 | This is a paragraph—we still cool?
3 | After
--------------------------------------------------------------------------------
/test/stubs/issue-154/c-red.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/test/stubs/issue-67/meta-social.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/scoped-css/components/my-component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/externals/externals.webc:
--------------------------------------------------------------------------------
1 | This is another global component.
2 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/test/stubs/bucket-inherit-attrs/index.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/components/shadowroot.webc:
--------------------------------------------------------------------------------
1 |
2 |
5 | Hello
--------------------------------------------------------------------------------
/test/stubs/head/meta.webc:
--------------------------------------------------------------------------------
1 | This is a paragraph—we still cool?
3 | After
--------------------------------------------------------------------------------
/test/stubs/components/override-parent-scoped.webc:
--------------------------------------------------------------------------------
1 | SSR content
2 |
--------------------------------------------------------------------------------
/test/stubs/components/render-slots.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/components/shadowrootmode.webc:
--------------------------------------------------------------------------------
1 |
2 |
5 | Hello
--------------------------------------------------------------------------------
/test/stubs/dynamic-bucket/component.webc:
--------------------------------------------------------------------------------
1 | Hi
2 |
3 |
--------------------------------------------------------------------------------
/test/stubs/externals/externals-dynamic.webc:
--------------------------------------------------------------------------------
1 | This is another global component.
2 | This is another global component.
2 |
5 |
--------------------------------------------------------------------------------
/examples/render/components/add-banner-to-css.webc:
--------------------------------------------------------------------------------
1 |
6 | This is another global component.
2 |
3 |
5 |
--------------------------------------------------------------------------------
/test/stubs/attrs-dashes/my-component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/components/render-css.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/components/render-slots-raw.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/nested-no-shadowdom.webc:
--------------------------------------------------------------------------------
1 | Before
2 |
3 | Child content
4 |
6 | After
--------------------------------------------------------------------------------
/test/stubs/externals/externals-urls.webc:
--------------------------------------------------------------------------------
1 | This is another global component.
2 | My First Heading
8 | My first paragraph.
9 |
10 |
--------------------------------------------------------------------------------
/test/stubs/render-child-component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = tab
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 |
9 | [/test/**/*]
10 | trim_trailing_whitespace = false
11 | insert_final_newline = unset
--------------------------------------------------------------------------------
/test/stubs/looping/components/card-content.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/test/stubs/two-style.webc:
--------------------------------------------------------------------------------
1 | Light dom content
2 | Light dom content
--------------------------------------------------------------------------------
/test/stubs/components/render-css-root-override.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-138/img.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/render.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/test/stubs/render2.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/test/stubs/import-twice.webc:
--------------------------------------------------------------------------------
1 | Before
2 | Light dom content
3 | Light dom content
4 | After
--------------------------------------------------------------------------------
/examples/html/page.webc:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/test/stubs/issue-78/add-banner-to-css.webc:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/test/stubs/render-async.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/test/stubs/render-async2.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/test/stubs/render-raw.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/test/stubs/render3.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/examples/page/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 |
7 | let { html, css, js, components } = await page.compile();
8 | console.log({ html, css, js, components });
--------------------------------------------------------------------------------
/test/stubs/defined-style.webc:
--------------------------------------------------------------------------------
1 |
9 | This will be green at first and then switch to red when JS has registered the component.
--------------------------------------------------------------------------------
/test/stubs/externals/externals-urls-keep.webc:
--------------------------------------------------------------------------------
1 | This is another global component.
2 |
4 | /* Some other CSS content */
5 |
--------------------------------------------------------------------------------
/test/stubs/issue-94/component.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/setup-script/component.webc:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/test/stubs/components/clientside.webc:
--------------------------------------------------------------------------------
1 | This is the web component content.
2 |
--------------------------------------------------------------------------------
/test/stubs/issue-78/add-banner-to-css-render.webc:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/test/stubs/components-order.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CHILD CONTENT
5 |
6 | SIBLING CONTENT
7 |
8 | AUNT CONTENT
9 |
--------------------------------------------------------------------------------
/test/stubs/asset-buckets.webc:
--------------------------------------------------------------------------------
1 | Hi
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/test/stubs/bucket-inherit/component.webc:
--------------------------------------------------------------------------------
1 | Hi
2 |
3 |
4 |
2 |
3 |
6 | Shadow dom slot
7 |
--------------------------------------------------------------------------------
/test/stubs/issue-104/setup-component.webc:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/test/stubs/issue-208/page.webc:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/test/stubs/issue-78/img.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/head/head-is-component.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 | This is a title
6 |
--------------------------------------------------------------------------------
/test/stubs/html.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 | Light dom content
2 | Light dom content
--------------------------------------------------------------------------------
/test/stubs/scoped-top.webc:
--------------------------------------------------------------------------------
1 |
13 | Testing testing
--------------------------------------------------------------------------------
/examples/slots/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 | page.defineComponents("components/my-component.webc");
7 |
8 | let { html } = await page.compile();
9 | console.log({ html });
10 |
--------------------------------------------------------------------------------
/test/stubs/style-override.webc:
--------------------------------------------------------------------------------
1 |
13 | Testing testing
--------------------------------------------------------------------------------
/test/stubs/issue-154/page.webc:
--------------------------------------------------------------------------------
1 | Hi I am red
2 | Hi I am blue
3 |
4 |
5 | I am red.
6 | Hi I am blue
7 | still red
8 |
9 |
10 |
11 | I am blue.
12 | Hi I am red
13 | still blue
14 |
--------------------------------------------------------------------------------
/test/stubs/render-raw-nokeep.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/examples/imports/page.webc:
--------------------------------------------------------------------------------
1 | WebC Example
2 |
9 |
--------------------------------------------------------------------------------
/test/stubs/issue-85/page.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/page.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
2 |
3 |
4 | CHILD CONTENT
5 |
6 |
7 | AUNT CONTENT
8 |
9 |
--------------------------------------------------------------------------------
/examples/lookup-attributes/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 | page.defineComponents("components/my-component.webc");
7 |
8 | let { html, css, js, components } = await page.compile();
9 | console.log({ html, css, js, components });
--------------------------------------------------------------------------------
/examples/render/components/img.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/nested-multiple-slots.webc:
--------------------------------------------------------------------------------
1 | Before
2 |
3 | Before slot content!
4 |
5 |
6 |
7 |
Slot 2 content
8 |
After slot content!
10 |
11 | After
--------------------------------------------------------------------------------
/test/stubs/page-capital-doctype-issue-24.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
3 |
7 |
--------------------------------------------------------------------------------
/test/stubs/attribute-quotes.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
normal component
2 | js
5 |
8 |
9 | js with component
10 |
--------------------------------------------------------------------------------
/test/stubs/fake_node_modules/@11ty/test/syntax-highlighter.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/nested-multiple-slots-raw.webc:
--------------------------------------------------------------------------------
1 | Before
2 |
3 | Before slot content!
4 |
5 |
6 |
7 |
Slot 2 content
8 |
After slot content!
10 |
11 | After
--------------------------------------------------------------------------------
/examples/helpers/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 | page.setHelper("alwaysBlue", () => {
7 | return "I'm blue, da ba dee da ba di"
8 | });
9 |
10 | let { html, css, js, components } = await page.compile();
11 | console.log({ html, css, js, components });
12 |
--------------------------------------------------------------------------------
/examples/slots/components/my-component.webc:
--------------------------------------------------------------------------------
1 | Hello World!
2 |
3 |
6 |
7 | Test
9 |
10 |
11 | Hi, this is a test
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/render/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 | page.defineComponents({
7 | "avatar-image": "components/img.webc",
8 | "add-banner-to-css": "components/add-banner-to-css.webc"
9 | });
10 |
11 | let { html, css, js, components } = await page.compile();
12 | console.log({ html, css, js, components });
--------------------------------------------------------------------------------
/src/astCache.js:
--------------------------------------------------------------------------------
1 | import { parse } from "parse5";
2 |
3 | class AstCache {
4 | constructor() {
5 | this.ast = {};
6 | }
7 |
8 | get(contents) {
9 | if(!this.ast[contents]) {
10 | this.ast[contents] = parse(contents, {
11 | scriptingEnabled: true,
12 | sourceCodeLocationInfo: true,
13 | });
14 | }
15 |
16 | return this.ast[contents];
17 | }
18 | }
19 |
20 | export { AstCache };
--------------------------------------------------------------------------------
/test/comments-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Server-side comments", async t => {
5 | let component = new WebC();
6 | component.setContent(`Hello`);
7 |
8 | let { html } = await component.compile();
9 | t.is(html, `Hello`);
10 | });
--------------------------------------------------------------------------------
/src/path.js:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 | import { TemplatePath } from "@11ty/eleventy-utils";
3 |
4 | class Path {
5 | // cross browser normalize a file path to use /
6 | static normalizePath(filePath) {
7 | if(typeof filePath === "string") {
8 | return TemplatePath.addLeadingDotSlash(filePath.split(path.sep).join("/"));
9 | }
10 | return filePath;
11 | }
12 | }
13 |
14 | export { Path };
15 |
--------------------------------------------------------------------------------
/test/issue-85-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Missing props #85", async t => {
5 | let component = new WebC();
6 |
7 | component.setInputPath("./test/stubs/issue-85/page.webc");
8 |
9 | let { html } = await component.compile();
10 |
11 | t.is(html.trim(), `Your image didn’t have an alt so you get this link instead. `);
12 | });
13 |
--------------------------------------------------------------------------------
/examples/stream/page.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | WebC Example
6 |
14 |
17 |
18 |
19 | WebC *is* HTML.
20 |
21 |
--------------------------------------------------------------------------------
/examples/custom-transforms/page.js:
--------------------------------------------------------------------------------
1 | import MarkdownIt from "markdown-it";
2 | import { WebC } from "../../webc.js";
3 |
4 | let page = new WebC();
5 |
6 | page.setInputPath("page.webc");
7 |
8 | let md = new MarkdownIt({ html: true });
9 |
10 | page.setTransform("md", (content) => {
11 | return md.render(content);
12 | });
13 |
14 | let { html, css, js, components } = await page.compile();
15 | console.log({ html, css, js, components });
--------------------------------------------------------------------------------
/test/issue-94-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("non-string props #94", async t => {
5 | let component = new WebC();
6 |
7 | component.defineComponents("./test/stubs/issue-94/component.webc");
8 |
9 | component.setContent(`hello hello
`);
13 | });
14 |
--------------------------------------------------------------------------------
/src/astModify.js:
--------------------------------------------------------------------------------
1 | // Take extreme care when using these utilities, they mutate the Live AST
2 |
3 | class AstModify {
4 | static addAttribute(node, name, value) {
5 | node.attrs.push({ name, value });
6 | }
7 |
8 | // Not in use
9 | // static removeAttribute(node, name) {
10 | // let index = node.attrs.findIndex(attr => attr.name === name);
11 | // if(index !== -1) {
12 | // node.attrs.splice(index, 1);
13 | // }
14 | // }
15 | }
16 |
17 | export { AstModify };
--------------------------------------------------------------------------------
/test/issue-84-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | // This doesn’t technically test console.log output but it’s close enough for now 😅
5 | test("Non string output from webc:type=js #84", async t => {
6 | let component = new WebC();
7 | component.setContent(``);
10 |
11 | let { html } = await component.compile();
12 |
13 | t.is(html, `1`);
14 | });
15 |
--------------------------------------------------------------------------------
/test/stubs/issue-105/test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../../../webc.js";
3 |
4 | test("Template content issue #105", async t => {
5 | let component = new WebC();
6 |
7 | component.defineComponents("./test/stubs/issue-105/test-p.webc");
8 |
9 | component.setContent(`I am an HTML-only component
WebC Example
2 |
3 |
4 | This is the default slot
8 |
9 |
10 |
11 | This is a named slot
12 |
13 |
14 |
15 |
16 | This is another named slot with slot tag
17 |
--------------------------------------------------------------------------------
/test/issue-138-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Circular dep error #138", async t => {
5 | let component = new WebC();
6 |
7 | component.setInputPath("./test/stubs/issue-138/page.webc");
8 | component.defineComponents("./test/stubs/issue-138/img.webc");
9 |
10 | let { html } = await component.compile();
11 |
12 | t.is(html.trim(), `
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/issue-79-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("webc:import in Components should be relative to component file #79", async t => {
5 | let component = new WebC();
6 |
7 | component.setInputPath("./test/stubs/issue-79/pages/articles/my-page.webc");
8 | component.defineComponents("./test/stubs/issue-79/components/**.webc");
9 |
10 | let { html } = await component.compile();
11 |
12 | t.is(html.trim(), `WebC Example
6 |
11 |
14 |
17 |
18 |
19 |
24 | WebC *is* HTML.
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/stream/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 |
7 | let { html, css, js } = await page.stream();
8 |
9 | // html stream
10 | await printStream(html);
11 |
12 | // css stream
13 | await printStream(css);
14 |
15 | // js stream
16 | await printStream(js);
17 |
18 | async function printStream(stream) {
19 | const chunks = [];
20 | for await (const chunk of stream) {
21 | chunks.push(Buffer.from(chunk));
22 | }
23 | console.log(Buffer.concat(chunks).toString("utf-8"));
24 | }
--------------------------------------------------------------------------------
/test/issue-98-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Issue #3 slot inconsistency", async t => {
5 | let component = new WebC();
6 |
7 | component.setInputPath("./test/stubs/issue-98/page.webc");
8 | component.defineComponents("./test/stubs/issue-98/component.webc");
9 |
10 | let { html, css, js, components } = await component.compile();
11 |
12 | t.deepEqual(components, [
13 | "./test/stubs/issue-98/page.webc",
14 | "./test/stubs/issue-98/component.webc",
15 | ]);
16 |
17 | t.is(html, `
`);
18 | });
--------------------------------------------------------------------------------
/test/stubs/looping/complex/data.js:
--------------------------------------------------------------------------------
1 | export const contacts = [
2 | {
3 | "name":"Joey",
4 | "color":"blue",
5 | "numbers":[1,2,3]
6 | },
7 | {
8 | "name":"Phoebe",
9 | "color":"pink",
10 | "numbers":[1,2,3]
11 | },
12 | {
13 | "name":"Chandler",
14 | "color":"orange",
15 | "numbers":[1,2,3]
16 | },
17 | {
18 | "name":"Rachel",
19 | "color":"violet",
20 | "numbers":[1,2,3]
21 | },
22 | {
23 | "name":"Monica",
24 | "color":"green",
25 | "numbers":[1,2,3]
26 | },
27 | {
28 | "name":"Ross",
29 | "color":"red",
30 | "numbers":[1,2,3]
31 | }
32 | ]
--------------------------------------------------------------------------------
/test/issue-118-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Slottable webc:type transform #118", async t => {
5 | t.plan(2);
6 | let component = new WebC();
7 |
8 | component.setInputPath("./test/stubs/issue-118/page.webc");
9 | component.defineComponents("./test/stubs/issue-118/oh-no.webc");
10 | component.setTransform("override", (content) => {
11 | t.truthy( content );
12 | return `This is an override`;
13 | });
14 |
15 | let { html } = await component.compile();
16 |
17 | t.is(html.trim(), `This is an override
`);
18 | });
--------------------------------------------------------------------------------
/examples/imports/page.js:
--------------------------------------------------------------------------------
1 | import { WebC } from "../../webc.js";
2 |
3 | let page = new WebC();
4 |
5 | page.setInputPath("page.webc");
6 |
7 | // Pass in a glob, using the file name as component name
8 | page.defineComponents("components/**.webc");
9 |
10 | // Array of file names, using file name as component name
11 | // page.defineComponents(["components/my-component.webc"]);
12 |
13 | // Object maps component name to file name
14 | // page.defineComponents({
15 | // "my-component": "components/my-component.webc"
16 | // });
17 |
18 | let { html } = await page.compile();
19 | console.log({ html });
--------------------------------------------------------------------------------
/test/issue-91-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Issue #91 render functions require template", async t => {
5 | let component = new WebC();
6 |
7 | component.setBundlerMode(true);
8 | component.setInputPath("./test/stubs/issue-91/page.webc");
9 | component.defineComponents("./test/stubs/issue-91/img.webc");
10 |
11 | let { html, css, js, components } = await component.compile();
12 |
13 | t.is(html, `
2 | # Header
3 | ## Header 2
4 | ### Header 3
5 |
6 | * List item 1
7 | * List item 2
8 | * List item 3
9 |
10 | 1. List item 1
11 | 2. List item 2
12 | 3. List item 3
13 |
14 | **Bold text**
15 |
16 | *Italic text*
17 |
18 | ~~Strikethrough text~~
19 |
20 | [Link](https://11ty.dev)
21 |
22 | 
23 |
24 |
25 | | Column 1 | Column 2 | Column 3 |
26 | | -------- | -------- | -------- |
27 | | Row 1 | Row 1 | Row 1 |
28 | | Row 2 | Row 2 | Row 2 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/test/issue-115-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("New line at beginning issue #115", async t => {
5 | let component = new WebC();
6 |
7 | component.setInputPath("./test/stubs/issue-115/page.webc");
8 |
9 | let { html } = await component.compile();
10 |
11 | t.is(html.trim(), `
12 |
13 |
14 | Test
18 |
19 |
20 | Hi, this is a test
21 |
22 |
23 |
24 | `);
25 | });
26 |
--------------------------------------------------------------------------------
/test/issue-83-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | // This doesn’t technically test console.log output but it’s close enough for now 😅
5 | test("console log in webc:type=js #83", async t => {
6 | t.plan(2);
7 |
8 | let component = new WebC();
9 | component.setContent(``);
16 |
17 | let { html } = await component.compile({
18 | data: {
19 | console: {
20 | log: function(message) {
21 | t.is(message, 2);
22 | }
23 | }
24 | }
25 | });
26 |
27 | t.is(html, `hello 2`);
28 | });
29 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | on:
2 | push:
3 | branches:
4 | - main
5 | pull_request:
6 | types: [opened, reopened, synchronize]
7 |
8 | env:
9 | YARN_GPG: no
10 |
11 | jobs:
12 | build:
13 | runs-on: ${{ matrix.os }}
14 | strategy:
15 | matrix:
16 | os: ["ubuntu-latest", "macos-latest", "windows-latest"]
17 | node: ["18", "20", "22", "24"]
18 | name: Node.js ${{ matrix.node }} on ${{ matrix.os }}
19 | steps:
20 | - uses: actions/checkout@v3
21 | - name: Setup node
22 | uses: actions/setup-node@v3
23 | with:
24 | node-version: ${{ matrix.node }}
25 | - name: Cache node_modules
26 | uses: actions/cache@v3
27 | id: cache
28 | with:
29 | path: node_modules
30 | key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package.json') }}
31 |
32 | - run: npm install
33 |
34 | - run: npm test
35 |
--------------------------------------------------------------------------------
/test/stubs/render-import.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/issue-145-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("@keyframes percentage webc:scoped #145", async t => {
5 | let component = new WebC();
6 |
7 | component.setContent(``);
13 |
14 | let { html } = await component.compile();
15 |
16 | t.is(html.trim(), ``);
17 | });
18 |
19 | test("@keyframes from/to webc:scoped #145", async t => {
20 | let component = new WebC();
21 |
22 | component.setContent(``);
28 |
29 | let { html } = await component.compile();
30 |
31 | t.is(html.trim(), ``);
32 | });
--------------------------------------------------------------------------------
/test/stubs/render-require.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/render-js-import.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/stubs/render-setup-import.webc:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/issue-156-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("HTML entities in
35 | Hello World !
36 |
37 | After`);
38 | });
39 |
40 | test("Using a web component with a declarative shadow root using shadowrootmode", async t => {
41 | let { html, css, js, components } = await testGetResultFor("./test/stubs/nested.webc", {
42 | "web-component": "./test/stubs/components/shadowrootmode.webc"
43 | }, {}, { globalData: "World" });
44 |
45 | t.deepEqual(js, []);
46 | t.deepEqual(css, []);
47 | t.deepEqual(components, [
48 | "./test/stubs/nested.webc",
49 | "./test/stubs/components/shadowrootmode.webc"
50 | ]);
51 | t.is(html, `Before
52 |
53 |
56 | Hello World !
57 |
`);
7 | component.setInputPath("./test/stubs/component-script-html.webc");
8 |
9 | let { html } = await component.compile({
10 | data: {
11 | class: "test-class"
12 | }
13 | });
14 | t.is(html, `
`);
15 | });
16 |
17 | test("Throw a better error message when attempting to use `class` in dynamic attributes without this #45", async (t) => {
18 | let component = new WebC();
19 | component.setContent(`
`);
20 | component.setInputPath("./test/stubs/component-script-html.webc");
21 |
22 | await t.throwsAsync(component.compile({
23 | data: {
24 | class: "test-class"
25 | }
26 | }), {
27 | message: 'Error parsing dynamic attribute failed: `:class="class"`. `class` is a reserved word in JavaScript. Change `class` to `this.class` instead!'
28 | });
29 | });
30 |
31 | test("Real class in dynamic attributes #45", async (t) => {
32 | let component = new WebC();
33 | component.setContent(`
`);
34 | component.setInputPath("./test/stubs/component-script-html.webc");
35 |
36 | let { html } = await component.compile({
37 | data: {
38 | class: "test-class"
39 | }
40 | });
41 | t.is(html, `
`);
42 | });
43 |
44 | test("Using Math!", async (t) => {
45 | let component = new WebC();
46 | component.setContent(`
`);
47 |
48 | let { html } = await component.compile();
49 | t.true(html.startsWith(`
`));
51 |
52 | let num = parseFloat(html.slice(`
`.length), 10);
53 | t.is(typeof NaN, "number");
54 | t.is(typeof num, "number");
55 | t.true(!isNaN(num));
56 | });
57 |
--------------------------------------------------------------------------------
/test/attributeSerializerTest.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 |
3 | import { AttributeSerializer } from "../src/attributeSerializer.js";
4 |
5 | // Inputs are guaranteed to be lower case (per the HTML specification)
6 | test("Normalize attribute", async t => {
7 | t.deepEqual(await AttributeSerializer.evaluateAttribute("test", "value"), { name: "test", value: "value", evaluation: false, privacy: "public", rawName: "test", rawValue: "value" });
8 | t.deepEqual(await AttributeSerializer.evaluateAttribute("@test", "value"), { name: "test", value: "value", evaluation: false, privacy: "private", rawName: "@test", rawValue: "value" });
9 | t.deepEqual(await AttributeSerializer.evaluateAttribute(":test", "value", { value: 1 }), { name: "test", value: 1, evaluation: "script", privacy: "public", rawName: ":test", rawValue: "value" });
10 | });
11 |
12 | test("Normalize attribute name", async t => {
13 | t.is(AttributeSerializer.camelCaseAttributeName("test"), "test");
14 | t.is(AttributeSerializer.camelCaseAttributeName("my-test"), "myTest");
15 | t.is(AttributeSerializer.camelCaseAttributeName("my-other-test"), "myOtherTest");
16 | t.is(AttributeSerializer.camelCaseAttributeName("my-other--test"), "myOtherTest");
17 | t.is(AttributeSerializer.camelCaseAttributeName("my-_other-test"), "my_otherTest");
18 | t.is(AttributeSerializer.camelCaseAttributeName("-my-other-test"), "MyOtherTest");
19 | t.is(AttributeSerializer.camelCaseAttributeName("my-other-test-"), "myOtherTest");
20 | t.is(AttributeSerializer.camelCaseAttributeName("my-other-test------"), "myOtherTest");
21 | t.is(AttributeSerializer.camelCaseAttributeName("m-y-other-test"), "mYOtherTest");
22 | });
23 |
24 | test("Normalize attributes for data", async t => {
25 | t.deepEqual(await AttributeSerializer.normalizeAttributesForData({"test": 1 }), {"test": 1 });
26 | t.deepEqual(await AttributeSerializer.normalizeAttributesForData({"my-test": 1 }), {"myTest": 1 });
27 | t.deepEqual(await AttributeSerializer.normalizeAttributesForData({"my-other-test": 1 }), {"myOtherTest": 1 });
28 | });
29 |
--------------------------------------------------------------------------------
/test/issue-208-test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("HTML entities in
10 |
11 | `);
12 |
13 | let { html, css, js, components } = await component.compile();
14 |
15 | t.deepEqual(js, []);
16 | t.deepEqual(css, []);
17 | t.deepEqual(components, []);
18 | t.is(html.trim(), `
19 |
20 | `);
21 | });
22 |
23 | test("HTML entities in
30 |
31 | `);
32 |
33 | let { html, css, js, components } = await component.compile();
34 |
35 | t.deepEqual(js, []);
36 | t.deepEqual(css, []);
37 | t.deepEqual(components, []);
38 | t.is(html.trim(), `
39 |
40 | `);
41 | });
42 |
43 | test("Escaping in
53 |
54 | `);
55 | });
--------------------------------------------------------------------------------
/test/globalComponentsTest.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 |
3 | import { WebC } from "../webc.js";
4 |
5 | test("Uses a global component (register by glob)", async t => {
6 | let component = new WebC();
7 | component.setContent(`This is another global component.
62 |
63 | Hello I am in the default slot. `);
9 | component.defineComponents("./test/stubs/issue-152/parent.webc");
10 |
11 | let { html } = await component.compile({
12 | data: {
13 | globalData: "Hello"
14 | }
15 | });
16 |
17 | t.is(html.trim(), `Hello I am in the default slot.Hello `);
18 | });
19 |
20 | test("Slotted global data access nested #152", async t => {
21 | let component = new WebC();
22 |
23 | component.setBundlerMode(true);
24 | component.setContent(`Hello Hello Hello Hello
35 |
38 |
`);
39 |
40 | await t.throwsAsync(async () => component.compile(), {
41 | message: "Could not find any top level \`;
50 | `);
51 |
52 | let { html, css } = await component.compile();
53 |
54 | t.is(html.trim(), ``);
55 | t.deepEqual(css, ["div { color: red; }"]);
56 | });
57 |
58 | test("nested content, style webc:scoped from a webc:type=js", async t => {
59 | let component = new WebC();
60 | component.setBundlerMode(true);
61 | component.setContent(``);
64 |
65 | await t.throwsAsync(async () => component.compile(), {
66 | message: "Could not find any top level `);
95 | });
96 |
97 | test("Docs css example using wrapper element #78", async t => {
98 | let component = new WebC();
99 |
100 | component.setContent(``);
103 | component.defineComponents("./test/stubs/issue-78/add-banner-to-css-root.webc");
104 |
105 | let { html } = await component.compile();
106 |
107 | t.is(html.trim(), ``);
113 | });
114 |
115 | test("Docs css example using render #78", async t => {
116 | let component = new WebC();
117 |
118 | component.setContent(``);
121 | component.defineComponents("./test/stubs/issue-78/add-banner-to-css-render.webc");
122 |
123 | let { html } = await component.compile();
124 |
125 | t.is(html.trim(), ``);
131 | });
132 |
--------------------------------------------------------------------------------
/src/css.js:
--------------------------------------------------------------------------------
1 | import { generate, parse, walk } from "css-tree";
2 |
3 | class CssPrefixer {
4 | constructor(prefix) {
5 | if(!prefix) {
6 | throw new Error("No prefix was passed to the CSS prefixer!");
7 | }
8 | this.prefix = prefix;
9 | }
10 |
11 | static processWithoutTransformation(str) {
12 | let ast = parse(str, {
13 | positions: true
14 | });
15 |
16 | return generate(ast);
17 | }
18 |
19 | setFilePath(filePath) {
20 | this.filePath = filePath;
21 | }
22 |
23 | parse(str) {
24 | return parse(str, {
25 | // filename: this.filePath,
26 | positions: true
27 | })
28 | }
29 |
30 | process(cssString) {
31 | let ast = this.parse(cssString);
32 |
33 | let skipLevel = 0;
34 |
35 | walk(ast, {
36 | visit: "Selector",
37 | enter: (node, item, list) => {
38 | let first = node.children.first;
39 |
40 | const shouldSkip =
41 | skipLevel > 0 ||
42 | // from/to in @keyframes
43 | (first.type === "TypeSelector" && first.name === "from") ||
44 | (first.type === "TypeSelector" && first.name === "to") ||
45 | // percentage selectors in @keyframes
46 | (first.type === "Percentage");
47 |
48 | if (shouldSkip) {
49 | // do nothing
50 | } else if (
51 | first.type === "PseudoClassSelector" &&
52 | (first.name === "host" || first.name === "host-context")
53 | ) {
54 | // Transform :host and :host-context pseudo classes to
55 | // use the prefix class
56 | node.children.shift();
57 |
58 | const pseudoClassParamChildren = first.children ? first.children : null;
59 |
60 | if (first.name === "host") {
61 | // Replace :host with the prefix class
62 | if (pseudoClassParamChildren) {
63 | // Any param children of a :host() functional pseudo class should be moved up to
64 | // be directly after the prefix class
65 | // ie, :host(.foo) -> .prefix.foo
66 | node.children.prependList(
67 | // :host can only accept one param, so we can safely use the first child
68 | pseudoClassParamChildren.first.children
69 | );
70 | }
71 | node.children.prepend(
72 | list.createItem({
73 | type: "ClassSelector",
74 | name: this.prefix,
75 | })
76 | );
77 | } else if (first.name === "host-context") {
78 | // Replace :host-context with the prefix class and
79 | // place any param children appropriately before the prefix class
80 | node.children.prepend(
81 | list.createItem({
82 | type: "ClassSelector",
83 | name: this.prefix,
84 | })
85 | );
86 |
87 | if (pseudoClassParamChildren) {
88 | // Any param children of a :host-context() functional pseudo class should be moved up to
89 | // be parents before the prefix class
90 | // ie, :host-context(.foo) div -> .foo .prefix div
91 | node.children.prepend(
92 | list.createItem({
93 | type: "Combinator",
94 | name: " ",
95 | })
96 | );
97 | node.children.prependList(
98 | // :host-context can only accept one param, so we can safely use the first child
99 | pseudoClassParamChildren.first.children
100 | );
101 | }
102 | }
103 | } else {
104 | // list won’t exist for `@supports selector(*)` (but we don’t want to prefix that anyway)
105 | if(list) {
106 | // Prepand the prefix class in front of all selectors
107 | // which don't include :host or :host-context
108 | node.children.prepend(
109 | list.createItem({
110 | type: "Combinator",
111 | name: " ",
112 | })
113 | );
114 | node.children.prepend(
115 | list.createItem({
116 | type: "ClassSelector",
117 | name: this.prefix,
118 | })
119 | );
120 | }
121 | }
122 |
123 | node.children.forEach((node, item, list) => {
124 | if(node.type === "PseudoClassSelector") {
125 | skipLevel++;
126 | }
127 | });
128 | },
129 | leave: (node, item, list) => {
130 | node.children.forEach((node) => {
131 | if(node.type === "PseudoClassSelector") {
132 | skipLevel--;
133 | }
134 | });
135 | }
136 | });
137 |
138 | return generate(ast, {
139 | sourceMap: false
140 | });
141 | }
142 | }
143 |
144 | export { CssPrefixer };
145 |
--------------------------------------------------------------------------------
/test/stubs/setup-script/test.js:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 | import test from "ava";
3 | import { WebC } from "../../../webc.js";
4 |
5 | test("webc:setup #87", async t => {
6 | let component = new WebC();
7 |
8 | component.setContent(`
9 |
16 |
`);
17 |
18 | let { html } = await component.compile();
19 |
20 | t.is(html.trim(), `1
21 |
22 | blue
`);
23 | });
24 |
25 | test("webc:setup with a helper #87", async t => {
26 | let component = new WebC();
27 |
28 | component.setHelper("alwaysYellow", () => "yellow");
29 |
30 | component.setContent(`
35 |
`);
36 |
37 | let { html } = await component.compile();
38 |
39 | t.is(html.trim(), `yellow
`);
40 | });
41 |
42 | test("webc:setup with global data #87", async t => {
43 | let component = new WebC();
44 |
45 | component.setHelper("alwaysYellow", () => "yellow");
46 |
47 | component.setContent(`
52 |
`);
53 |
54 | let { html } = await component.compile({
55 | data: {
56 | globalDataValue: "hello"
57 | }
58 | });
59 |
60 | t.is(html.trim(), `hello
`);
61 | });
62 |
63 |
64 | test("webc:setup with child component #87", async t => {
65 | let component = new WebC();
66 | component.setHelper("globalFunction", (a) => a);
67 |
68 | component.defineComponents("./test/stubs/setup-script/component.webc");
69 |
70 | component.setContent(`
71 |
78 |
`);
80 |
81 | let { html } = await component.compile();
82 |
83 | t.is(html.trim(), `1
84 |
85 | 2
86 |
87 | red
88 | blue
`);
89 | });
90 |
91 | test("webc:setup without export", async t => {
92 | let component = new WebC();
93 |
94 | component.setContent(`
95 | `);
98 |
99 | let { html } = await component.compile();
100 |
101 | // should be empty (no export)
102 | t.is(html.trim(), `
`);
103 | });
104 |
105 | test("webc:setup with export", async t => {
106 | let component = new WebC();
107 |
108 | component.setContent(`
109 | `);
112 |
113 | let { html } = await component.compile();
114 |
115 | t.is(html.trim(), `1
`);
116 | });
117 |
118 | test("webc:setup with function (no export)", async t => {
119 | let component = new WebC();
120 |
121 | component.setContent(`
126 |
`);
127 |
128 | let e = await t.throwsAsync(() => component.compile());
129 | t.true(e.message.startsWith(`Evaluating a dynamic attribute failed: \`@html="alwaysBlue()"\``));
130 | });
131 |
132 | test("webc:setup with function (export)", async t => {
133 | let component = new WebC();
134 |
135 | component.setContent(`
140 |
`);
141 |
142 | let { html } = await component.compile();
143 |
144 | t.is(html.trim(), `blue
`);
145 | });
146 |
147 | test("webc:setup with import and export", async t => {
148 | let component = new WebC();
149 |
150 | // Absolute path used here
151 | component.setInputPath(path.resolve("./test/stubs/setup-script/test.webc"));
152 | component.setContent(`
158 |
`);
159 |
160 | let { html } = await component.compile();
161 |
162 | t.is(html.trim(), `This is imported!
`);
163 | });
164 |
165 | // TODO swap `export` to `import`
166 | // probably a bug in `import-module-string`
167 | test.skip("webc:setup with import combo export", async t => {
168 | let component = new WebC();
169 |
170 | // Absolute path used here
171 | component.setInputPath(path.resolve("./test/stubs/setup-script/test.webc"));
172 | component.setContent(`
175 |
`);
176 |
177 | let { html } = await component.compile();
178 |
179 | t.is(html.trim(), `This is imported!
`);
180 | });
181 |
182 | test("webc:setup with encodeURIComponent", async t => {
183 | let component = new WebC();
184 |
185 | component.setContent(`
190 |
`);
191 |
192 | let { html } = await component.compile();
193 |
194 | t.is(html.trim(), `this%20is%20a%20test
`);
195 | });
--------------------------------------------------------------------------------
/test/renderFunctionJsTest.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { WebC } from "../webc.js";
3 |
4 | test("Using webc:type=js", async t => {
5 | let component = new WebC();
6 |
7 | // identical to
8 | component.setContent(`
9 |
10 |
13 | `);
14 |
15 | let { html, css, js, components } = await component.compile({
16 | data: {
17 | myArray: [1,2,3,4]
18 | }
19 | });
20 |
21 | t.deepEqual(js, []);
22 | t.deepEqual(css, []);
23 | t.deepEqual(components, []);
24 |
25 | t.is(html, `
26 |
27 | 1/2/3/4
28 |
29 | `);
30 | });
31 |
32 | test("Using webc:type=js with require", async t => {
33 | let component = new WebC();
34 |
35 | // Needs a filePath for require/import
36 | component.setInputPath("./component.webc");
37 |
38 | // identical to
39 | component.setContent(`
40 |
41 |
42 |
46 |
47 | `);
48 |
49 | let { html, css, js, components } = await component.compile();
50 |
51 | t.deepEqual(js, []);
52 | t.deepEqual(css, []);
53 | t.deepEqual(components, ["./component.webc"]);
54 |
55 | t.is(html, `
56 |
57 |
58 | Imported
59 |
60 |
61 | `);
62 | });
63 |
64 | // Seems like this ignores webc:type and outputs the
71 | 
--------------------------------------------------------------------------------
/test/stubs/issue-152/parent-nohtml.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/components/nested-child-empty.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/issue-80-b/c.webc:
--------------------------------------------------------------------------------
1 | 
--------------------------------------------------------------------------------
/test/stubs/issue-104/root-override-attrs-component.webc:
--------------------------------------------------------------------------------
1 | 
--------------------------------------------------------------------------------
/test/stubs/looping/array-value.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/array.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/object-key.webc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/stubs/looping/scoped-data.webc:
--------------------------------------------------------------------------------
1 |