Vue 3 support - Githubissues

mesqueeb commented 3 years ago

I have released the official Vue 3 Blitzar! 🎉

See new docs: https://blitzar.cycraft.co/

--

[x] double check wether or not the documentation of blitzar covers all use cases & features for the Vue 2 version
[x] recreate the documentation in Vite + Vue 3 with all the markdown content ready.
[x] start implementing all the examples of the docs one by one.
- [x] completely rewrite BlitzForm, BlitzTable, BlitzListForm based on this rewrite
- [ ] keep an ongoing list of breaking changes

-- Breaking Changes For Blitzar + Vue 3

BlitzTable

BlitzTable was completely rewritten and has changed a lot.

Please check out the new documentation on BlitzTable and adjust accordingly.
Some features are not yet re-implemented like conditional/dynamic styles & classes but they will be soon

BlitzForm

renamed terminology

@input to @update:modelValue
- reason: Vue 3 requirement
@field-input to @updateField
- reason: update-field makes sense with Vue 3 terminology (because Vue 3 doesn't rely on @input anymore)
@input-cell to @updateCell
- reason: same as above
fieldInput (the function) to updateField
- reason: same as above
evaluatedProps to dynamicProps
- reason: clarity — Dynamic Props is a bit easier to understand imo.
mode: 'view' to mode: 'readonly'
- reason: clarity — closer to HTML5 readonly attribute

upgrade strategy for the above:

find and replace

Deprecated props

deprecate rules validation array per field
- reason: we do not use Quasar under the hood anymore, rules was only used because Quasar's QField uses it for Validation
- I have thought a long time about the best way of implementing Validation, looking at VeeValidate, Vuelidate, Quasar, Vuetify and others, and have realised we already have a very simple implementation of form validation via Dynamic Props... So to reduce codebase complexity, I have added a new prop called error where you can simple pass a validation function much like the rules prop before. The difference is, it's a single function (to be marked as dynamicProps: ['error']) and you make it a single function that returns null if there's no error, or the error you want to display when there is one.
- upgrade strategy: Read the new Documentation on Validation here. Please scroll to "validation" at the bottom

// before
{
  rules: [(val) => Number(val) > 18 || 'no minors allowed']
}
// after
{
  dynamicProps: ['error'],
  error: (val) => Number(val) > 18 ? null : 'no minors allowed'
}

deprecate prop internalErrorsFor array of field-names
- reason: reduce codebase complexity & delete less common options to reduce size
- upgrade strategy: just add internalErrors: true to the fields you need this
deprecate prop validator global validation function
- reason: reduce codebase complexity & delete less common options to reduce size
- upgrade strategy: just add error validation to each field in your schema instead
deprecate mode: 'add'
- reason: reduce complexity
- upgrade strategy:
- check if your forms rely on mode: 'add' by doing a global search for add
- write custom logic to difference between mode: 'add' and mode: 'edit'

Peter-Gabel commented 3 years ago

Is there an estimate on when this might be available? Or, alternatively, any insight into what needs to be done to migrate to Vue 3?

mesqueeb commented 3 years ago

This is a great question!

Currently Blitzar uses QForm and QTable under the hood. I plan to make the library way more Framework Agnostic by removing the dependencies on QForm and QTable.

I have nothing against QForm and QTable, but the issue is: using those as dependency introduces a lot of global CSS pollution in projects. So currently it's really annoying when using Blitzar in Non-Quasar projects...

Planned steps:

Remove QForm dependency
Remove QTable dependency

Upgrading to Vue3:

If Quasar upgrades to Vue 3 before I remove the dependencies, I can make the upgrade to Vue 3 on beforehand.
If I am able to remove the dependencies before Quasar upgrades to Vue 3, I can make the upgrade to Vue 3 myself.

Peter-Gabel commented 3 years ago

I do not mind the QForm and QTable dependencies; Quasar v2 beta appears to be very stable and I am using Quasar for my application. So my preference is for movement to Vue 3 first. I looked at the Blitzar code and thought that there would not be too many changes but I was not confident in my doing it myself.

mesqueeb commented 3 years ago

@Peter-Gabel the thing is, I rather wait until Quasar's official Vue 3 release. If you want to help out and try using the current Quasar Vue 3 beta, you can help me out on a new branch. Do you want to try? We can have a short zoom session if you'd like where I show you how to best do it if you're still new to contributing on Github.

Peter-Gabel commented 3 years ago

Yes. I'd love to get right on it but it will take me about a week to find the time in my schedule. If you could propose when might be convenient for you, I would be grateful for guidance including any insights that you could share about migrating the code to Vue 3. I'm still getting up to speed on Vue 3 - I keep dropping into Vue 2 idioms and then need to remind myself of the differences. I am in the eastern US time zone but can be very flexible.

mesqueeb commented 3 years ago

what's your discord tag?

Am3ra commented 3 years ago

@mesqueeb Seeing as quasar already updated to Vue3, is there any issue updating now?

mesqueeb commented 3 years ago

@Am3ra I will do my best to try to find the time to work on it!! Your support is much appreciated! : )

mesqueeb commented 3 years ago

ps: WIP on this branch https://github.com/CyCraft/blitzar/tree/v1.0.0

mesqueeb commented 3 years ago

Finished BlitzForm and BlitzListForm.

Now working on BlitzTable. Looking at vue-dataset and vuejs-smart-table.

FelipeVeiga commented 3 years ago

I'm anxious to use in quasar v2, thanks from Brazil.

WayneBuckhanan commented 3 years ago

Loving what I'm seeing so far with Blitzar. Looking forward to the updates to support the latest version of Quasar.

mesqueeb commented 3 years ago

Thanks guys. I will try to host the new docs and release beta version this week. BlitzForm and BlitzListForm are already done and usable in beta in Vue 3 projects.

WayneBuckhanan commented 3 years ago

Thanks, Luca. I'm using BlitzTable in a new Quasar project and had to drop back to v1 because this library is helpful enough to make it worth doing that. Personally, I'd rather see it working with QForm and QTables than wait for the non-Quasar refactoring.

mesqueeb commented 3 years ago

I was able to deploy the docs for Vue 3 here: https://blitzar-next.web.app/blitz-form/

You can install the Vue 3 compatible BlitzForm by

npm i @blitzar/form@next

and use it according to the new docs.

Also check out the breaking changes documented in the first post of this thread.

I will continue to update here once I make progress hosting the new docs and also updates on the Vue 3 compatible BlitzTable.

mesqueeb commented 3 years ago

I was able to deploy the docs for Vue 3 here: https://blitzar-next.web.app/blitz-form/

mesqueeb commented 3 years ago

@WaltiDev did you globally register CodeBlock?

WaltiDev commented 3 years ago

I think yes: My "quasar boot file" has filename "blitzar.js" and is located in the /src/boot/ folder. _import { boot } from 'quasar/wrappers' import { BlitzForm } from '@blitzar/form'

export default boot(async ({ app }) => { app.component('BlitzForm', { BlitzForm }) app.component('CodeBlock', { BlitzForm }) })_

And in quasar.conf.js I added "blitzar" into boot: boot: [ 'blitzar' ],

**Now I get the warning:**
_[Vue warn]: Component is missing template or render function. at <BlitzForm schema= Array [ {…}, {…} ] modelValue= Object {  } onUpdate:modelValue=fn  ... >_

mesqueeb commented 3 years ago

your code seems wrong.

First of all, you need to globally register BlitzForm like so:

✅ correct: app.component('BlitzForm', BlitzForm)
❌ wrong: app.component('BlitzForm', { BlitzForm })

And second of all, I think you have a typo for CodeBlock. Where are you getting this component from?

✅ correct: app.component('CodeBlock', CodeBlock) (but you need to import it from somewhere)
❌ wrong: app.component('CodeBlock', { BlitzForm })

I hope that helps!

PS: for more assistance with this, please open a new issue. I wanna keep this thread clean and only about upgrading the Blitzar source code.

phineas629 commented 2 years ago

Hi,

Is there a timeline for when BlitzTable will work with Vue 3? I migrated to quasar v2 recently and would love to implement Blitzar.

mesqueeb commented 2 years ago

@phineas629 yes I've been working on it this week and hopefully have something out next week.

phineas629 commented 2 years ago

@mesqueeb sweet! I really want to try Blitzar out. If it's a fit then you got my support.

mesqueeb commented 2 years ago

I have released the official Vue 3 Blitzar! 🎉

See new docs: https://blitzar.cycraft.co/

Will continue to improve Blitzar heavily into 2022.

Blitzar does not use Quasar anymore and is now usable with any Vue framework.

(still need to test SSR and Nuxt though, might not be compatible with SSR just yet)

phineas629 commented 2 years ago

Thanks!

Sent from my T-Mobile 4G LTE Device Get Outlook for Androidhttps://aka.ms/AAb9ysg

From: Luca Ban @.> Sent: Saturday, December 18, 2021 4:08:16 AM To: CyCraft/blitzar @.> Cc: Phineas Vang @.>; Mention @.> Subject: Re: [CyCraft/blitzar] Vue 3 support (#55)

I have released the official Vue 3 Blitzar! 🎉

See new docs: https://blitzar.cycraft.co/

Will continue to improve Blitzar heavily into 2022.

— Reply to this email directly, view it on GitHubhttps://github.com/CyCraft/blitzar/issues/55#issuecomment-997180152, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHDA6JVHW2VRKJFHKXTSAPTURRMRBANCNFSM4V2CJVCQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.Message ID: @.***>

mesqueeb commented 2 years ago

To everyone here: Vue 3 release of Blitzar is getting quite stable! Closing this issue for now.

I still plan to:

create a framework example for Quasar, Nuxt, ...

Let me know if anything's up!

_{--
Blitzar was made with 💜 by Luca Ban.
You cannot sponsor every project, but next time you do, think of this one for its prolonged maintenance.}

phineas629 commented 2 years ago

HI Luca,

Can you meet online for consulting? I have questions about blitzar integration with quasar.

Thanks, Phineas

On Jan 8, 2022, at 11:13 PM, Luca Ban @.**@.>> wrote:

To everyone here: Vue 3 release of Blitzar is getting quite stable! Closing this issue for now.

I still plan to:

create a framework example for Quasar, Nuxt, ...

Let me know if anything's up!

-- Blitzar was made with 💜 by Luca Ban. You cannot sponsor every project, but next time you do, think of this onehttps://github.com/sponsors/mesqueeb for its prolonged maintenance.

— Reply to this email directly, view it on GitHubhttps://github.com/CyCraft/blitzar/issues/55#issuecomment-1008232044, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHDA6JWALEK3QSM65I3E3ZLUVEKODANCNFSM4V2CJVCQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.Message ID: @.***>

eric-nicular commented 1 year ago

Is continued support for Blitzar still ongoing?

CyCraft / blitzar

Vue 3 support #55

BlitzTable

BlitzForm

renamed terminology

Deprecated props