wip
This commit is contained in:
Georges KABBOUCHI
+17
-1
@@ -26,16 +26,32 @@
|
||||
"@rollup/plugin-commonjs": "^14.0.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-replace": "^2.3.3",
|
||||
"@types/webpack": "^4.41.21",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@vue/compiler-sfc": "^3.0.0-rc.5",
|
||||
"css-loader": "^4.2.0",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"rollup": "^2.23.0",
|
||||
"rollup-plugin-css-only": "^2.1.0",
|
||||
"rollup-plugin-postcss": "^3.1.3",
|
||||
"rollup-plugin-terser": "^6.1.0",
|
||||
"rollup-plugin-typescript2": "^0.27.1",
|
||||
"style-loader": "^1.2.1",
|
||||
"ts-loader": "^8.0.2",
|
||||
"ts-node": "^8.10.2",
|
||||
"typescript": "^3.9.7",
|
||||
"vue": "^3.0.0-rc.5"
|
||||
"vue": "^3.0.0-rc.5",
|
||||
"vue-loader": "^16.0.0-beta.4",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-bundle-analyzer": "^3.8.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tippy.js": "^6.2.6"
|
||||
},
|
||||
"vetur": {
|
||||
"tags": "dist/vetur-tags.json",
|
||||
"attributes": "dist/vetur-attributes.json"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<tippy content="test">
|
||||
Hi
|
||||
</tippy>
|
||||
|
||||
<button ref="button">My Button</button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { useTippy } from '../src'
|
||||
import { TippyOptions } from '../src/composables/useTippy'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const button = ref<HTMLButtonElement>()
|
||||
|
||||
useTippy(button, {
|
||||
content: 'Test',
|
||||
} as Partial<TippyOptions>)
|
||||
|
||||
return {
|
||||
button,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
// necessary for webpack
|
||||
///<reference path="../src/global.d.ts"/>
|
||||
import { createApp } from 'vue'
|
||||
import { Tippy } from '../src'
|
||||
|
||||
import App from './App.vue'
|
||||
const app = createApp(App)
|
||||
app.component('tippy', Tippy)
|
||||
app.mount('#app')
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import { Component } from 'vue'
|
||||
var component: Component
|
||||
export default component
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"include": ["./**/*.ts"],
|
||||
"compilerOptions": {
|
||||
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
|
||||
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
|
||||
// "lib": ["es2017.object"] /* Specify library files to be included in the compilation. */,
|
||||
// "declaration": true /* Generates corresponding '.d.ts' file. */,
|
||||
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
|
||||
"sourceMap": true /* Generates corresponding '.map' file. */,
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
"outDir": "./dist" /* Redirect output structure to the directory. */,
|
||||
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
"noUnusedLocals": true /* Report errors on unused locals. */,
|
||||
"noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
|
||||
|
||||
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
|
||||
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { defineComponent, ref, h, PropType } from 'vue'
|
||||
import { Content } from 'tippy.js'
|
||||
import { useTippy } from 'src'
|
||||
import { useTippy } from '../composables/useTippy'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import tippy, { Instance, Props } from 'tippy.js'
|
||||
import { ref, onMounted, Ref, isRef } from 'vue'
|
||||
|
||||
export declare type TippyOptions = Props
|
||||
|
||||
export function useTippy(
|
||||
el: Element | Ref<Element> | Ref<Element | undefined>,
|
||||
opts: Partial<Props> = {}
|
||||
opts: Partial<TippyOptions> = {}
|
||||
) {
|
||||
const instance = ref<Instance>()
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
const { resolve } = require('path')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
|
||||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
const webpack = require('webpack')
|
||||
|
||||
const outputPath = resolve(__dirname, 'playground_dist')
|
||||
|
||||
/** @type {import('webpack').ConfigurationFactory} */
|
||||
const config = (env = {}) => {
|
||||
const extraPlugins = env.prod ? [new BundleAnalyzerPlugin()] : []
|
||||
|
||||
return {
|
||||
mode: env.prod ? 'production' : 'development',
|
||||
devtool: env.prod ? 'source-map' : 'inline-source-map',
|
||||
|
||||
devServer: {
|
||||
contentBase: outputPath,
|
||||
historyApiFallback: true,
|
||||
hot: true,
|
||||
stats: 'minimal',
|
||||
},
|
||||
|
||||
output: {
|
||||
path: outputPath,
|
||||
publicPath: '/',
|
||||
filename: 'bundle.js',
|
||||
},
|
||||
|
||||
entry: [resolve(__dirname, 'playground/main.ts')],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: {
|
||||
loader: 'ts-loader',
|
||||
options: { appendTsSuffixTo: [/\.vue$/] },
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: 'vue-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
// this isn't technically needed, since the default `vue` entry for bundlers
|
||||
// is a simple `export * from '@vue/runtime-dom`. However having this
|
||||
// extra re-export somehow causes webpack to always invalidate the module
|
||||
// on the first HMR update and causes the page to reload.
|
||||
vue: '@vue/runtime-dom',
|
||||
},
|
||||
// Add `.ts` and `.tsx` as a resolvable extension.
|
||||
extensions: ['.ts', 'd.ts', '.tsx', '.js', '.vue'],
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: resolve(__dirname, 'playground/index.html'),
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
__DEV__: JSON.stringify(!env.prod),
|
||||
__BROWSER__: 'true',
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
}),
|
||||
...extraPlugins,
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
Reference in New Issue
Block a user