feat: add type definition of component #380

odanado · 2021-01-19T23:15:08Z

Description

Fix a part of #275.
I don't added any type definitions other than components (e.g. Chakra class).

Motivation and Context

We can import each components in a typescript file.

How Has This Been Tested?

Automatically generate d.ts file from each components.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
All new and existing tests passed.

changeset-bot · 2021-01-19T23:15:11Z

⚠️ No Changeset found

Latest commit: b31c25f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2021-01-19T23:15:12Z

@odanado is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

odanado · 2021-01-19T23:16:08Z

Do I need to add a new document and a new test?

packages/chakra-ui-core/types/component.d.ts

vercel · 2021-01-22T23:05:55Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui-vue – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/j1qgf1xkq
✅ Preview: https://chakra-ui-vue-git-fork-odanado-fix-issues-275.chakra-ui.vercel.app

codebender828

Thank you @odanado for the work done here. I commented about some improvements that we can possible make before merging this.

packages/chakra-ui-core/types/component.d.ts

codebender828 · 2021-01-23T00:30:42Z

packages/chakra-ui-core/types/component.d.ts

@@ -0,0 +1,150 @@
+declare module '@chakra-ui/vue' {
+  import Vue from 'vue'
+


Do you want to include declarations for the default export from @chakra-ui/vue also? Since the plugin has some options, I think it will be useful as well. You can find a good reference here:

chakra-ui-vue/packages/chakra-ui-core/src/Chakra/index.js

Lines 28 to 82 in e76b657

/**

* @typedef {Object} Options

* @property {Theme} theme

* @property {Theme} extendTheme

* @property {Object} icons

* @property {Object} icons.extend

* @property {String} icons.iconPack

* @property {Object} icons.iconSet

*

*/

/**

* Chakra-ui Component library plugin

* @type {Chakra}

*/

const Chakra = {

/**

*

* @param {Vue} Vue

* @param {Options} options

*/

install (Vue, options = {}) {

let packIcons = {}

const extendedIcons = options.icons ? options.icons.extend || {} : {}

if (options.icons) {

packIcons = parsePackIcons(options.icons.iconSet)

}

const icons = {

...internalIcons,

...packIcons,

...extendedIcons

}

// Recursively merge extended theme variables

const mergedTheme = merge(defaultTheme, options.extendTheme)

Vue.directive('chakra', createClientDirective(mergedTheme))

// Bind theme and icons to prototype

Vue.prototype.$chakra = {

theme: mergedTheme,

icons

}

const toast = useToast()

Vue.prototype.$toast = toast

/** Install dependent plugins */

Vue.use(VScrollLock)

}

}

export default Chakra

I think it can be improved since I last updated these.

fix in 15ed202 and b7c9389

Thank you @odanado

odanado · 2021-02-06T12:13:22Z

The current .d.ts file of type is corrupted. I'm fixing it.

odanado · 2021-02-06T16:00:02Z

@codebender828 Could you review again.
sample: https://github.com/odan-sandbox/chakra-ui-vue-ts-sandbox/blob/main/src/main.ts

codebender828

Thank you @odanado

codebender828 · 2021-02-07T07:14:31Z

packages/chakra-ui-core/types/component.d.ts

@@ -0,0 +1,150 @@
+declare module '@chakra-ui/vue' {
+  import Vue from 'vue'
+


Thank you @odanado

codebender828

Awesome work here @odanado. Thank you

codebender828 · 2021-02-07T07:38:21Z

@all-contributors please add @odanado for code and tool

allcontributors · 2021-02-07T07:39:58Z

@codebender828

I've put up a pull request to add @odanado! 🎉

feat: add types of component

2f190b3

odanado commented Jan 19, 2021

View reviewed changes

packages/chakra-ui-core/types/component.d.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – chakra-ui-vue January 22, 2021 23:05 View deployment

codebender828 changed the title ~~Add type definition of component~~ feat: add type definition of component Jan 23, 2021

codebender828 added type: feature or enhancement ⚡️ New feature or request type: tooling 🛠 Has to do with support modules that enhance the development experience with Chakra UI Vue typescript To do with using Typescript labels Jan 23, 2021

This was linked to issues Jan 23, 2021

@chakra-ui/vue not bundled with type definition files #275

Closed

[Typescript]: Theme values are not updated after modifying them in custom-theme.js, in a Vue TS project. #296

Closed

codebender828 self-requested a review January 23, 2021 00:26

codebender828 reviewed Jan 23, 2021

View reviewed changes

feat: add type of Chakra

15ed202

fix: fix importing of types

b7c9389

codebender828 approved these changes Feb 7, 2021

View reviewed changes

vercel bot deployed to Preview – chakra-ui-vue February 7, 2021 07:19 View deployment

Merge branch 'develop' into fix-issues-275

4b1c66d

vercel bot deployed to Preview – chakra-ui-vue February 7, 2021 07:32 View deployment

codebender828 approved these changes Feb 7, 2021

View reviewed changes

allcontributors bot mentioned this pull request Feb 7, 2021

docs: add odanado as a contributor #389

Merged

Merge branch 'develop' into fix-issues-275

b31c25f

vercel bot deployed to Preview – chakra-ui-vue February 7, 2021 08:31 View deployment

codebender828 merged commit 5e8de84 into chakra-ui:develop Feb 7, 2021

This was referenced Mar 14, 2021

Chakra Plugin Types for autocomplete #202

Closed

chore: release @chakra-ui/vue@0.8.0 | @chakra-ui/nuxt@0.3.0 🎉 #408

Merged

dependabot bot mentioned this pull request Mar 15, 2021

fix(deps): bump @chakra-ui/nuxt from 0.2.4 to 0.3.0 IHIutch/RateMyStop#10

Closed

		@@ -0,0 +1,150 @@
		declare module '@chakra-ui/vue' {
		import Vue from 'vue'

	/**
	* @typedef {Object} Options
	* @property {Theme} theme
	* @property {Theme} extendTheme
	* @property {Object} icons
	* @property {Object} icons.extend
	* @property {String} icons.iconPack
	* @property {Object} icons.iconSet
	*
	*/

	/**
	* Chakra-ui Component library plugin
	* @type {Chakra}
	*/
	const Chakra = {
	/**
	*
	* @param {Vue} Vue
	* @param {Options} options
	*/
	install (Vue, options = {}) {
	let packIcons = {}
	const extendedIcons = options.icons ? options.icons.extend \|\| {} : {}

	if (options.icons) {
	packIcons = parsePackIcons(options.icons.iconSet)
	}

	const icons = {
	...internalIcons,
	...packIcons,
	...extendedIcons
	}

	// Recursively merge extended theme variables
	const mergedTheme = merge(defaultTheme, options.extendTheme)

	Vue.directive('chakra', createClientDirective(mergedTheme))

	// Bind theme and icons to prototype
	Vue.prototype.$chakra = {
	theme: mergedTheme,
	icons
	}

	const toast = useToast()
	Vue.prototype.$toast = toast

	/** Install dependent plugins */
	Vue.use(VScrollLock)
	}
	}

	export default Chakra

feat: add type definition of component #380

feat: add type definition of component #380

Conversation

odanado commented Jan 19, 2021

Description

Motivation and Context

How Has This Been Tested?

Types of changes

Checklist:

Uh oh!

changeset-bot bot commented Jan 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Jan 19, 2021

Uh oh!

odanado commented Jan 19, 2021

Uh oh!

Uh oh!

vercel bot commented Jan 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

chakra-ui-vue – ./

Uh oh!

codebender828 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codebender828 Jan 23, 2021

Choose a reason for hiding this comment

Uh oh!

odanado Feb 6, 2021

Choose a reason for hiding this comment

Uh oh!

codebender828 Feb 7, 2021

Choose a reason for hiding this comment

Uh oh!

odanado commented Feb 6, 2021

Uh oh!

odanado commented Feb 6, 2021

Uh oh!

codebender828 left a comment

Choose a reason for hiding this comment

Uh oh!

codebender828 Feb 7, 2021

Choose a reason for hiding this comment

Uh oh!

codebender828 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codebender828 commented Feb 7, 2021

Uh oh!

allcontributors bot commented Feb 7, 2021

Uh oh!

Uh oh!

changeset-bot bot commented Jan 19, 2021 •

edited

Loading

vercel bot commented Jan 22, 2021 •

edited

Loading

codebender828 left a comment •

edited

Loading