Blocks-cli 2.0.0 is here!

[Albrey_Bristo-B]

Hey Airtable Community,

We’re excited to announce the newest version 2.0.0 of our command line tool for custom block development, @airtable/blocks-cli.Thank you to the developers and community forum members that provided feedback and beta tested this version prior to release.

What new features can you expect?

We heard feedback that it was difficult to share code between block projects, and the inability to customize the way block’s code was bundled limited what developers could build with blocks. To that end, we’ve worked to release the following features.

Use code from other directories: This version allows the bundling of “sibling directories” outside the source directory. Those directories can include npm imports based on link or file.

Using a custom bundler: This version uses webpack and allows you to swap out our built-in bundler for your own, custom, bundler. You can provide a complete custom bundler implementation, or you can start with the Webpack bundler package and tweak the configuration to suit your needs.

What if I don’t want to upgrade to version 2?

That’s fine! This is not a forced upgrade, and these new features are purely additive. Feel free to revert back to older versions if v2 is not for you.

Have feedback for us? Feel free to submit any bugs or feedback specific to @airtable/blocks-cli here.

We’re very excited about our plans for the developer platform in 2022 - stay tuned!

[Jack_Manuel]

This is great news, thanks! Will make a big project I’m planning feel a bit more manageable, I’m sure. Can you give us any more on that last line? What kind of things can we expect this year?

[Albrey_Bristo-B]

We typically send out announcements and sneak peaks about our roadmap in the developer newsletter. I encourage you to sign up!

[Ronen_Babayoff]

Hey @Albrey_Bristo-Brown, great news. Questions:

1. Does the new cli support an external tsconfig.json file? We always need to add support for experimentalDecorators due to mobx. If not, can you please add an example on how to use our own custom tsconfig.json file in a custom bundler in the webpack bundler package readme?

2. Can we add the latest version of the @airtable/blocks package to a non-airtable project without it complaining that it needs to run within a context of a base? We have a shared npm package we use for both airtable and non-airtable apps that depends on the blocks package and we needed to patch it in order to use it in non-airtable apps. If not straight out of the box, can we somehow accomplish this using the new custom bundler? If yes, can you also please provide an example for that?

Thanks,
Ronen

[Ronen_Babayoff]

Hey @Albrey_Bristo-Brown and @Taylor_Savage , it is still very very cumbersome and time consuming to manage a monorepo with airtable apps in it. Would love guidance on my questions above.

[Kevin_Wilde]

Hi @Ronen_Babayoff, check out this example for using MobX with decorators, TypeScript, and a custom bundler. Hope this helps

GitHub

GitHub - kevinwilde-at/todo_app_mobx

Contribute to kevinwilde-at/todo_app_mobx development by creating an account on GitHub.

[Ronen_Babayoff]

Hey @Kevin_Wilde , this is great. Just checked it out, and everything works. Thanks!

Question - will it also work with monorepos and code from other directories?

Regarding my 2nd question, we were able to work around that by using patch-package, but if a better solution using a custom bundler exists, would be great.

Thanks again,
Ronen

[Kevin_Wilde]

It should work with monorepos and shared code. I think I’d need to see an example of what you are trying to achieve with adding @airtable/blocks to a non-airtable project – not sure I quite follow. If you can share a simplified example of your code and how you’ve patched @airtable/blocks that might help me understand.

We do have a simple example of sharing code with yarn workspaces here GitHub - Airtable/apps-shared-code: Shared code app examples, although I think you have seen this already.

[Ronen_Babayoff]

Hey @Kevin_Wilde , I’ll work on an example repo and let you know once done.

I do have another important question that is relevant to many app creators - we’d like to integrate sentry.io error monitoring into our app. Sentry has a webpack plugin, see here. It needs to be configured with an include param that specifies (from the documentation):

One or more paths that Sentry CLI should scan recursively for sources. It will upload all .map files and match associated .js files.

Can you please provide guidelines on how to use this plugin together with the typescript custom bundler? Would be highly appreciated.

Thanks!

[Kevin_Wilde]

@Ronen_Babayoff here’s an example of a block that is set up with Sentry. It uses the webpack plugin to upload source maps, and sends runtime errors to sentry. Hope this helps

GitHub

GitHub - kevinwilde-at/sentry_block

Contribute to kevinwilde-at/sentry_block development by creating an account on GitHub.