vonage / vivid-bindings-vue Goto Github PK

View Code? Open in Web Editor NEW

2.0 13.0 0.0 127 KB

Fully automated typescript bindings generated for Vivid web components to be used in VueJS

Home Page: https://www.npmjs.com/package/@vonage/vivid-bindings-vue

TypeScript 100.00%

vivid vuejs webcomponent bindings devex typesafe typescript vuejs3

vivid-bindings-vue's Issues

patch-build.yaml - Ensure top-level permissions are not set to write-all - autoclosed

patch-build.yaml - Ensure top-level permissions are not set to write-all

Violation detected in /.github/workflows/patch-build.yaml:[0-1]

📃 File Type: github_actions

⛔ Details - Ensure top-level permissions are not set to write-all

Generated components have invalid typescript annotations

I was looking into updating the build scripts to generate .d.ts files next to each generated component, which would fix typescript annotations for projects consuming this package - but I quickly hit a wall because some of the type annotations in generated files are invalid.

e.g. VwcTooltip.vue defines an anchor property with type anchorType | undefined - but it doesn't define or import anchorType.

click for all tsc errors

v3/VwcAccordionItem/VwcAccordionItem.vue:48:10 - error TS2304: Cannot find name 'AccordionItemSize'.

48   size?: AccordionItemSize | undefined
            ~~~~~~~~~~~~~~~~~

v3/VwcAlert/VwcAlert.vue:86:15 - error TS2304: Cannot find name 'AlertPlacement'.

86   placement?: AlertPlacement | undefined
                 ~~~~~~~~~~~~~~

v3/VwcCheckbox/VwcCheckbox.vue:74:17 - error TS2304: Cannot find name 'CheckboxConnotation'.

74   connotation?: CheckboxConnotation | undefined
                   ~~~~~~~~~~~~~~~~~~~

v3/VwcDataGrid/VwcDataGrid.vue:23:19 - error TS2304: Cannot find name 'DataGridSelectionMode'.

23   selectionMode?: DataGridSelectionMode | undefined
                     ~~~~~~~~~~~~~~~~~~~~~

v3/VwcDataGrid/VwcDataGrid.vue:37:36 - error TS2304: Cannot find name 'DataGridSelectionMode'.

37   selectionModeChanged: (oldValue: DataGridSelectionMode) => (element.value as any)?.selectionModeChanged(oldValue),
                                      ~~~~~~~~~~~~~~~~~~~~~

v3/VwcPagination/VwcPagination.vue:20:30 - error TS2300: Duplicate identifier 'Button'.

20 import { registerPagination, Button, Button } from '@vonage/vivid'
                                ~~~~~~

v3/VwcPagination/VwcPagination.vue:20:30 - error TS2305: Module '"@vonage/vivid"' has no exported member 'Button'.

20 import { registerPagination, Button, Button } from '@vonage/vivid'
                                ~~~~~~

v3/VwcPagination/VwcPagination.vue:20:38 - error TS2300: Duplicate identifier 'Button'.

20 import { registerPagination, Button, Button } from '@vonage/vivid'
                                        ~~~~~~

v3/VwcPagination/VwcPagination.vue:20:38 - error TS2305: Module '"@vonage/vivid"' has no exported member 'Button'.

20 import { registerPagination, Button, Button } from '@vonage/vivid'
                                        ~~~~~~

v3/VwcPagination/VwcPagination.vue:27:10 - error TS2304: Cannot find name 'PaginationSize'.

27   size?: PaginationSize | undefined
            ~~~~~~~~~~~~~~

v3/VwcRadio/VwcRadio.vue:77:17 - error TS2304: Cannot find name 'RadioConnotation'.

77   connotation?: RadioConnotation | undefined
                   ~~~~~~~~~~~~~~~~

v3/VwcTabs/VwcTabs.vue:42:17 - error TS2304: Cannot find name 'TabsConnotation'.

42   connotation?: TabsConnotation | undefined
                   ~~~~~~~~~~~~~~~

v3/VwcToggletip/VwcToggletip.vue:45:12 - error TS2304: Cannot find name 'AnchorType'.

45   anchor?: AnchorType
              ~~~~~~~~~~

v3/VwcToggletip/VwcToggletip.vue:53:22 - error TS2304: Cannot find name 'AnchorType'.

53   anchorChanged: (_: AnchorType, newValue: AnchorType) => (element.value as any)?.anchorChanged(_, newValue),
                        ~~~~~~~~~~

v3/VwcToggletip/VwcToggletip.vue:53:44 - error TS2304: Cannot find name 'AnchorType'.

53   anchorChanged: (_: AnchorType, newValue: AnchorType) => (element.value as any)?.anchorChanged(_, newValue),
                                              ~~~~~~~~~~

v3/VwcTooltip/VwcTooltip.vue:37:12 - error TS2304: Cannot find name 'anchorType'.

37   anchor?: anchorType | undefined
              ~~~~~~~~~~

v3/VwcTooltip/VwcTooltip.vue:41:22 - error TS2304: Cannot find name 'anchorType'.

41   anchorChanged: (_: anchorType, newValue: anchorType) => (element.value as any)?.anchorChanged(_, newValue),
                        ~~~~~~~~~~

v3/VwcTooltip/VwcTooltip.vue:41:44 - error TS2304: Cannot find name 'anchorType'.

41   anchorChanged: (_: anchorType, newValue: anchorType) => (element.value as any)?.anchorChanged(_, newValue),
                                              ~~~~~~~~~~

pipeline.yaml - Ensure top-level permissions are not set to write-all - autoclosed

pipeline.yaml - Ensure top-level permissions are not set to write-all

Violation detected in /.github/workflows/pipeline.yaml:[0-1]

📃 File Type: github_actions

⛔ Details - Ensure top-level permissions are not set to write-all

Vue warning when rendering `VwcTextField` without explicit `size` prop

Probably caused by #8 (whoops!)

When running in debug mode and rendering a <VwcTextField> without a size prop, a warning similar to the following is logged:

[Vue warn]: Failed setting prop "size" on <vvd3-text-field>: value undefined is invalid.
  DOMException: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.
    at Decorated.sizeChanged (http://localhost:4200/...)
---snip---
    at ReactiveEffect.run (http://localhost:4200/...) 
  at <VwcTextField icon="search-line" placeholder="Search..." value=""  ... >

I think this is because size is declared as an optional prop of VwcTextField, so omitting it is equivalent to passing :size="undefined" - but the underlying web component does not accept undefined as a value for size.

I don't think vivid-vue has this problem, because it passes its props to the underlying web component with code of the form:

...(this.size !== undefined ? {'size': this.size } : {})

i.e. if the Vue component's size prop is undefined (or omitted), then it won't forward it into underlying the web component at all

I don't believe this causes any user impact, it's just some unfortunate log spam in the browser console - so we may opt to just ignore it until we eventually migrate to vivid-vue.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.