yysun/apprun

How to combine Classy-UI with AppRun/TypeScript SPA?

jkleiser opened this issue · 6 comments

jkleiser commented

I would like to try out the beta-new https://classy-ui.io in a SPA made with AppRun/TypeScript. Classy-UI is a babel-plugin, and some install info can be seen here https://classy-ui.io/install/webpack ; I followed that info, adding the two webpack test rules to the two already in my webpack.config.js. This, however, doesn't seem to be enough; I get the following when trying access the component where I'm trying to use stuff from "classy-ui":

Error: CLASSY-UI: The plugin is not active. Either you are in a macro environment and you forgot to import from "classy-ui/macro", or the plugin is not added in your babel configuration

I have also been in contact with @christianalfoni, the creator of Classy-UI, about this. I plan to look more into this tomorrow.

An intro video to Classy-UI may be seen here: https://www.youtube.com/watch?v=HG2hR4kP0oM

jkleiser commented

I just got my first proof-of-concept app running, making use of AppRun and Classy-UI. It's based on https://github.com/a-tarasyuk/webpack-typescript-babel, and I also found useful info at https://github.com/microsoft/TypeScript-Babel-Starter. When I have a SPA ready that shows some Classy-UI features, I plan to put it up at GitHub.

jkleiser commented

Now my AppRun/Classy-UI SPA is available at https://github.com/jkleiser/apprun-classyui-spa, and you may try it here: http://apprun-classyui-spa.surge.sh/

yysun commented
  • 👍1
jkleiser commented

My first idea was, instead of the boring -1/+1 counter, to have some spinning 🌀, à la my rotating SVG carousel from back then, where I did the rotations by style="transform: rotate(${state}deg);". I learned today that putting this kind of style expressions into tsx/jsx is no longer permitted in AppRun; am I right?

yysun commented
jkleiser commented

Thanks! I will give it a try, in a few days.