Vite Plugin Ts Nameof: Ability to Resolve Nameof in TypeScript

vite-plugin-ts-nameof

Give Vite the ability to resolve nameof calls in TypeScript.

Usage

Install as devDependencies

npm add --save-dev vite-plugin-ts-nameof
# or
yarn add --dev vite-plugin-ts-nameof
# or
pnpm add --save-dev vite-plugin-ts-nameof

Inject vite-plugin-ts-nameof using the vite.config.ts module

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import tsNameof from 'vite-plugin-ts-nameof';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsNameof(), vue()],
});

Add ts-nameof.d.ts to your tsconfig.json

{
  // "compilerOptions"
  // "include"
  // ...
  "files": ["./node_modules/ts-nameof/ts-nameof.d.ts"]
}

More Awesome Vite Plugins

Can be found here: Awesome Vite.js

---

Author: Shinigami92
Source code:  https://github.com/Shinigami92/vite-plugin-ts-nameof
License: MIT license

#vite #typescript #vue 

What is GEEK

Buddha Community

Vite Plugin Ts Nameof: Ability to Resolve Nameof in TypeScript

vite-plugin-ts-nameof

Give Vite the ability to resolve nameof calls in TypeScript.

Usage

Install as devDependencies

npm add --save-dev vite-plugin-ts-nameof
# or
yarn add --dev vite-plugin-ts-nameof
# or
pnpm add --save-dev vite-plugin-ts-nameof

Inject vite-plugin-ts-nameof using the vite.config.ts module

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import tsNameof from 'vite-plugin-ts-nameof';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsNameof(), vue()],
});

Add ts-nameof.d.ts to your tsconfig.json

{
  // "compilerOptions"
  // "include"
  // ...
  "files": ["./node_modules/ts-nameof/ts-nameof.d.ts"]
}

More Awesome Vite Plugins

Can be found here: Awesome Vite.js

---

Author: Shinigami92
Source code:  https://github.com/Shinigami92/vite-plugin-ts-nameof
License: MIT license

#vite #typescript #vue 

The Definitive Guide to TypeScript & Possibly The Best TypeScript Book

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹

Reviews

• Thanks for the wonderful book. Learned a lot from it. (link)
• Its probably the Best TypeScript book out there. Good Job (link)
• Love how precise and clear the examples and explanations are! (link)
• For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
• Just a big thank you! Best TypeScript 2 detailed explanation! (link)
• This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
• I recommend the online #typescript book by @basarat you'll love it.(link)
• I've always found this by @basarat really helpful. (link)
• We must highlight TypeScript Deep Dive, an open source book.(link)
• Great online resource for learning. (link)
• Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
• TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
• Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
• Thanks to @basarat for this great #typescript learning resource. (link)
• Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
• Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
• numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
• A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
• In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
• Thank you for writing TypeScript Deep Dive. I have learned so much. link
• Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
• Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
• Thanks, this is a great book 🤓🤓 link
• Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
• @basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
•  
• This is sweet! So many #typescript goodies! link

Get Started

If you are here to read the book online get started.

Translations

Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.

• Filipino
• Italian
• Chinese
• Russian
• Portuguese
• Japanese
• Spanish
• Korean
• French
• Polish
• Thai

Other Options

You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.

Special Thanks

All the amazing contributors 🌹

Share

Share URL: https://basarat.gitbook.io/typescript/

Author: Basarat
Source Code: https://github.com/basarat/typescript-book/ 
License: View license

#typescript #opensource 

Vite Plugin Dts: A Vite Plugin for Generating `.d.ts` Files.

vite-plugin-dts

English | 中文

A vite plugin that generates declaration files (*.d.ts) from .ts or .vue source files when using vite in library mode.

Install

pnpm add vite-plugin-dts -D

Usage

In vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es'],
      fileName: 'my-lib'
    }
  },
  plugins: [dts()]
})

In your component:

<template>
  <div></div>
</template>

<script lang="ts">
// using defineComponent for inferring types
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Component'
})
</script>

<script setup lang="ts">
// Need to access the defineProps returned value to
// infer types although you never use the props directly
const props = defineProps<{
  color: 'blue' | 'red'
}>()
</script>

<template>
  <div>{{ color }}</div>
</template>

Options

import type { ts, Diagnostic } from 'ts-morph'

interface TransformWriteFile {
  filePath?: string
  content?: string
}

export interface PluginOptions {
  // Depends on the root directory
  // Defaults base on your vite config root options
  root?: string

  // Declaration files output directory
  // Defaults base on your vite config output options
  outputDir?: string

  // Manually set the root path of the entry files
  // The output path of each file will be caculated base on it
  // Defaults is the smallest public path for all files
  entryRoot?: string

  // Project init compilerOptions using by ts-morph
  // Default: null
  compilerOptions?: ts.CompilerOptions | null

  // Project init tsconfig.json file path by ts-morph
  // Plugin also resolve incldue and exclude files from tsconfig.json
  // Default: 'tsconfig.json'
  tsConfigFilePath?: string

  // Whether transform file name '.vue.d.ts' to '.d.ts'
  // Default: false
  cleanVueFileName?: boolean

  // Whether transform dynamic import to static
  // Force true when `rollupTypes` is effective
  // eg. 'import('vue').DefineComponent' to 'import { DefineComponent } from "vue"'
  // Default: false
  staticImport?: boolean

  // Manual set include glob
  // Defaults base on your tsconfig.json include option
  include?: string | string[]

  // Manual set exclude glob
  // Defaults base on your tsconfig.json exclude option, be 'node_module/**' when empty
  exclude?: string | string[]

  // Whether generate types entry file
  // When true will from package.json types field if exists or `${outputDir}/index.d.ts`
  // Force true when `rollupTypes` is effective
  // Default: false
  insertTypesEntry?: boolean

  // Set to rollup declaration files after emit
  // Power by `@microsoft/api-extractor`, it will start a new program which takes some time
  // Default: false
  rollupTypes?: boolean

  // Whether copy .d.ts source files into outputDir
  // Default: true
  copyDtsFiles?: boolean

  // Whether emit nothing when has any diagnostic
  // Default: false
  noEmitOnError?: boolean

  // Whether skip typescript diagnostics
  // Skip type diagnostics means that type errors will not interrupt the build process
  // But for the source files with type errors will not be emitted
  // Default: true
  skipDiagnostics?: boolean

  // Whether log diagnostic informations
  // Not effective when `skipDiagnostics` is true
  // Default: false
  logDiagnostics?: boolean

  // After emit diagnostic hook
  // According to the length to judge whether there is any type error
  // Default: () => {}
  afterDiagnostic?: (diagnostics: Diagnostic[]) => void | Promise<void>

  // Before declaration file be writed hook
  // You can transform declaration file-path and content through it
  // Default: () => {}
  beforeWriteFile?: (filePath: string, content: string) => void | TransformWriteFile

  // After build hook
  // It wil be called after all declaration files are written
  // Default: () => {}
  afterBuild?: () => void | Promise<void>
}

Example

Clone and run the following script:

pnpm run test:e2e

Then check example/types.

FAQ

Here are some FAQ's and solutions.

Missing some declaration files after build

By default skipDiagnostics option is true, which means that type diagnostic will be skipped during the build process (some projects may have diagnostic tools such as vue-tsc). If there are some files with type errors which interrupt the build process, these files will not be emitted (declaration files won't be generated).

If your project doesn't use type diagnostic tools, you can set skipDiagnostics: false and logDiagnostics: true to turn on the diagnostic and log features of this plugin. It will help you check the type errors during build and log error information to the terminal.

Take type error when using both script and setup-script in vue component

This is usually caused by using defineComponent function in both script and setup-script. When vue/compiler-sfc compiles these files, the default export result from script gets merged with the parameter object of defineComponent from setup-script. This is incompatible with parameters and types returned from defineComponent, which results in a type error.

Here is a simple example, you should remove the defineComponent which in script and export a native object directly.

---

Author: qmhc
Source code: https://github.com/qmhc/vite-plugin-dts
License: MIT license

#vite #typescript #javascript 

How To Customize WordPress Plugins? (4 Easy Ways To Do)

WordPress needs no introduction. It has been in the world for quite a long time. And up till now, it has given a tough fight to leading web development technology. The main reason behind its remarkable success is, it is highly customizable and also SEO-friendly. Other benefits include open-source technology, security, user-friendliness, and the thousands of free plugins it offers.

Talking of WordPress plugins, are a piece of software that enables you to add more features to the website. They are easy to integrate into your website and don’t hamper the performance of the site. WordPress, as a leading technology, has to offer many out-of-the-box plugins.

However, not always the WordPress would be able to meet your all needs. Hence you have to customize the WordPress plugin to provide you the functionality you wished. WordPress Plugins are easy to install and customize. You don’t have to build the solution from scratch and that’s one of the reasons why small and medium-sized businesses love it. It doesn’t need a hefty investment or the hiring of an in-house development team. You can use the core functionality of the plugin and expand it as your like.

In this blog, we would be talking in-depth about plugins and how to customize WordPress plugins to improve the functionality of your web applications.

What Is The Working Of The WordPress Plugins?

Developing your own plugin requires you to have some knowledge of the way they work. It ensures the better functioning of the customized plugins and avoids any mistakes that can hamper the experience on your site.

1. Hooks

Plugins operate primarily using hooks. As a hook attaches you to something, the same way a feature or functionality is hooked to your website. The piece of code interacts with the other components present on the website. There are two types of hooks: a. Action and b. Filter.

A. Action

If you want something to happen at a particular time, you need to use a WordPress “action” hook. With actions, you can add, change and improve the functionality of your plugin. It allows you to attach a new action that can be triggered by your users on the website.

There are several predefined actions available on WordPress, custom WordPress plugin development also allows you to develop your own action. This way you can make your plugin function as your want. It also allows you to set values for which the hook function. The add_ action function will then connect that function to a specific action.

B. Filters

They are the type of hooks that are accepted to a single variable or a series of variables. It sends them back after they have modified it. It allows you to change the content displayed to the user.

You can add the filter on your website with the apply_filter function, then you can define the filter under the function. To add a filter hook on the website, you have to add the $tag (the filter name) and $value (the filtered value or variable), this allows the hook to work. Also, you can add extra function values under $var.

Once you have made your filter, you can execute it with the add_filter function. This will activate your filter and would work when a specific function is triggered. You can also manipulate the variable and return it.

2. Shortcodes

Shortcodes are a good way to create and display the custom functionality of your website to visitors. They are client-side bits of code. They can be placed in the posts and pages like in the menu and widgets, etc.

There are many plugins that use shortcodes. By creating your very own shortcode, you too can customize the WordPress plugin. You can create your own shortcode with the add_shortcode function. The name of the shortcode that you use would be the first variable and the second variable would be the output of it when it is triggered. The output can be – attributes, content, and name.

3. Widgets

Other than the hooks and shortcodes, you can use the widgets to add functionality to the site. WordPress Widgets are a good way to create a widget by extending the WP_Widget class. They render a user-friendly experience, as they have an object-oriented design approach and the functions and values are stored in a single entity.

How To Customize WordPress Plugins?

There are various methods to customize the WordPress plugins. Depending on your need, and the degree of customization you wish to make in the plugin, choose the right option for you. Also, don’t forget to keep in mind that it requires a little bit of technical knowledge too. So find an expert WordPress plugin development company in case you lack the knowledge to do it by yourself.

1. Hire A Plugin Developer3

One of the best ways to customize a WordPress plugin is by hiring a plugin developer. There are many plugin developers listed in the WordPress directory. You can contact them and collaborate with world-class WordPress developers. It is quite easy to find a WordPress plugin developer.

Since it is not much work and doesn’t pay well or for the long term a lot of developers would be unwilling to collaborate but, you will eventually find people.

2. Creating A Supporting Plugin

If you are looking for added functionality in an already existing plugin go for this option. It is a cheap way to meet your needs and creating a supporting plugin takes very little time as it has very limited needs. Furthermore, you can extend a plugin to a current feature set without altering its base code.

However, to do so, you have to hire a WordPress developer as it also requires some technical knowledge.

3. Use Custom Hooks

Use the WordPress hooks to integrate some other feature into an existing plugin. You can add an action or a filter as per your need and improve the functionality of the website.

If the plugin you want to customize has the hook, you don’t have to do much to customize it. You can write your own plugin that works with these hooks. This way you don’t have to build a WordPress plugin right from scratch. If the hook is not present in the plugin code, you can contact a WordPress developer or write the code yourself. It may take some time, but it works.

Once the hook is added, you just have to manually patch each one upon the release of the new plugin update.

4. Override Callbacks

The last way to customize WordPress plugins is by override callbacks. You can alter the core functionality of the WordPress plugin with this method. You can completely change the way it functions with your website. It is a way to completely transform the plugin. By adding your own custom callbacks, you can create the exact functionality you desire.

We suggest you go for a web developer proficient in WordPress as this requires a good amount of technical knowledge and the working of a plugin.

Read More

#customize wordpress plugins #how to customize plugins in wordpress #how to customize wordpress plugins #how to edit plugins in wordpress #how to edit wordpress plugins #wordpress plugin customization

Vite Plugin MDX: Vite Plugin to Use MDX V1 with Your Vite App

Vite Plugin MDX

Vite plugin to use MDX v1 with your Vite app. For MDX v2 use @mdx-js/rollup instead, this comment explains how to implement it.

Features:

• Works with React and Preact.
• Works with Vue [WIP].
• HMR support.
• SSR support.
• Plugin support, such as remark-frontmatter.

Getting Started

Install:

1. Vite Plugin:

 npm install vite-plugin-mdx

1. MDX v1:

npm install @mdx-js/mdx

1. Or MDX v2:

npm install @mdx-js/mdx@next

1. MDX React:

npm install @mdx-js/react

1. Or MDX Preact:

npm install @mdx-js/preact

Add the plugin to your vite.config.js.

// vite.config.js

import mdx from 'vite-plugin-mdx'

// `options` are passed to `@mdx-js/mdx`
const options = {
  // See https://mdxjs.com/advanced/plugins
  remarkPlugins: [
    // E.g. `remark-frontmatter`
  ],
  rehypePlugins: [],
}

export default {
  plugins: [mdx(options)]
}

You can now write .mdx files.

// hello.mdx

import { Counter } from './Counter.jsx'

# Hello

This text is written in Markdown.

MDX allows Rich React components to be used directly in Markdown: <Counter/>

// Counter.jsx

import React, { useState } from 'react'

export { Counter }

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      Counter: {count}
    </button>
  )
}

Examples

• React example.
• Preact example.

File-specific options

To define options a per-file basis, you can pass a function to the mdx plugin factory.

mdx((filename) => {
  // Any options passed to `mdx` can be returned.
  return {
    remarkPlugins: [
      // Enable a plugin based on the current file.
      /\/components\//.test(filename) && someRemarkPlugin,
    ]
  }
})

Pre-built transclusion

To embed an .mdx or .md file into another, you can import it without naming its export. The file extension is required. Remark plugins are applied to the imported file before it's embedded.

import '../foo/bar.mdx'

---

Author:  brillout
Source Code:  https://github.com/brillout/vite-plugin-mdx
License:  MIT license

 #vite #typescript #react