drsensor / vue-authoring-template Goto Github PK
View Code? Open in Web Editor NEWVue project template for authoring component and their use case
License: MIT License
Vue project template for authoring component and their use case
License: MIT License
this issue can be solved when
[email protected]
is ready
Before writing the CI script, first:
The CI flow will be
git clone ...
the dummy repovue create DrSensor/vue-authoring-template ...
to the folder of cloned dummy repogit add -u .
add and update un-staged change and filegit commit --amend --no-edit
rewrite the latest commitnpm version patch
patch version to be able to published to npm
git push --force --tags
force push code and all tagsWorkaround before
[email protected]
Use expect to skip prompt.
Because storybook-deployer not working as I expected (I guess the problems is in poi-preset-storybook),
I'm thinking of alternatives for using:
404.html
and edit .storybook/dist/index.html
after build.Currently, chaining addon was global by specifying it in src/stories/index.js
. This way is too cluttered because index.js
consists codes not only for chaining addon. To make it better, I plan to separate it into a different file in src/stories/addon-chain.js
. For adding addon only for specific scenario/story we can use object-literal-lookups, so:
in src/stories/addon-chain.js
import Footer from '~/Footer.md'
import Readme from '~/README.md'
export default {
Story1: {
Senario1: (story, scenario) => withNotes(scenario.__notes || '')(story)
},
Story2: function (story) {
let docsStory = withReadme(Readme)(story)
return withFooter(Footer)(docsStory)
},
default: (story, scenario) => withDocs(scenario.__docs || '')(story)
}
and in src/stories/index.js
.
.
if (chainAddon[storyName][scenarioName] instanceof Function) {
var addAddon = chainAddon[storyName][scenarioName]
} else if (chainAddon[storyName] instanceof Function) {
var addAddon = chainAddon[storyName]
} else addAddon = chainAddon['default']
let storyWithAddons = addAddon(story, Component)
Stories.add(scenarioName, storyWithAddons)
Ability to generate vue file plugin in src/index.js
for storing multiple components in src/components/*.vue
like in many Vue UI framework.
to many in ๐
require('${name}').default
Package vue component as:
And publish it to:
If this enhancement use bili
, then poi
might be removed because the original purpose of poi
is to bundle vue component as library. This also open the possibility to use official storybook cli and addon without any quirk. And maybe it can solve #1 and able add support publishing to github pages.
In
package.json
, use fields:
main
forcjs
module
fores
unpkg
andjsdelivr
for minifiedumd
until webpack prioritizemodule
overbrowser
.
Support 2 CDN (https://unpkg.com and https://jsdelivr.com) in case one of them is server down.
Because vue init
was deprecated in exchange of vue invoke
with purpose to inject config, file, and other stuff, its preferable to use yeoman for scaffolding. Also yeoman has desktop app for it and can be integrated to IDE so that will benefit some windows user that use visual studio or webstorm. And also its more testable than vue init
. For injecting maybe if I have a time and there is a need for it, I will create vue-cli-plugin
for injecting storybook config and file.
Why? Take a look at this
Yes, components/
and stories/
separated by node_modules
. This is why most of Vue project template that are not related to config are placed in src/
. So there is need to rearrange to be like
project_root
โ
.
.
โโโ src
โย โโโ components/
. ย โโโ mixins/
.ย ย โโโ stories/
ย ย โโโ utils/
This issue for anticipating vue-cli 3.0
.
Currently, this template using poi
because vue build
was removed. Poi
is great for scaffolding project and hide the configuration project in prebuilt poi-presets
. However, it's also not really copas friendly because it uses webpack-chain
format for extending webpack configuration while many webpack-loader
and storybook-addon
in their README use curly brackets format and that make some user confused how to add that addon/loader. To make it copy-paste friendly, need to introduce config.merge(curlyBracketConfig)
in the .storybook/poi.config.js
.
Take for example storybook-readme
, if this template use webpack config of storybook then the user will know where to put storybookBaseConfig
to apply that addon.
need to keep on track
poi-preset-storybook
with storybook default config. Createcommit change bot
maybe...
Use global mixin
or extend
to make action can be called like this.$action(label, payload)
.
For example:
Vue.mixin({
methods: {
$action (label, payload) {
this.$emit('action', label, payload)
}
}
})
and in render function on stories/index.js
render () {
return <story onAction={action(`${storyName}/${componentName}`)} />
}
@DrSensor commented on Thu Jan 11 2018
Replace storybook/addon-info
with storybook-vue-addon-info until the official one support Vue.
For authoring Vuex module there is kind of usage like:
To support that usage, in storybook implementation its need:
...map{Vuex}
I also think of this template not also publishing vuex-modules but also vue-mixins that consist ...map{vuex}
declarations. Something like:
mixins/mymodule.js
export default {
computed: {
...mapGetters('mymodule', ['status', 'itemName'])
},
methods: {
...mapActions('mymodule', ['add', 'delete'])
}
}
then in scenario
use it like
<script>
import mymoduleMix from '../mixins/mymodule'
export default {
mixins: [mymoduleMix]
}
</script>
When authoring vuex modules, the project structure need to support multiple .vue
file in one scenario.
vue_router = false
-> 1 page, many components
Scenario1/
โโโ Component1.vue
โโโ Component2.vue
โโโ Layout.vue // this is where Component1 and Component2 being use
vue_router = true
-> add addon storybook-router
-> multiple pages, multiple/single components on each page
Scenario1/
โโโ Layout1.vue
โโโ Layout2
โย ย โโโ Component1.vue
โย ย โโโ Component2.vue
โย ย โโโ Layout.vue
โโโ App.vue
โโโ routes.js
click ๐ if you agree!
๐
PENDING: Need someone to review and/or give a vote about this feature.
In case someone need to build component that able to sparing 500 ms, on average, with 10000 rendered elements.
I happen to had a project that need to load component at runtime. Some way to do that is to use Async Component. To do that I need to build my component and save it in local disk or build it as UMD to be able to served in https://unpkg.com when publishing to npm
. Luckily, poi
support build component as UMD by
poi build --format umd --dist dist/umd
Reference:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.