#227 -- Support Transition Directive on Components #230

TristanHoladay · 2023-06-27T18:26:38Z

…ning into lots of errors with importing a custom preprocessor into the svelt.config.js as well as getting things to play nicely with the svelte for vs code extension.

netlify · 2023-06-27T18:26:42Z

✅ Deploy Preview for unicorn-ui ready!

Name	Link
🔨 Latest commit	`27a8c06`
🔍 Latest deploy log	https://app.netlify.com/sites/unicorn-ui/deploys/64e4b010238a3a0007950b01
😎 Deploy Preview	https://deploy-preview-230--unicorn-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

… work for passing to the preprocessor group [] in svelte.config.js); made adjustments to the preprocessor currently in svelte.config.js.

TristanHoladay · 2023-06-29T01:51:52Z

the preprocessor concept seems to be working, removing the Transition compilation error (though there's still a type error for the return type of the transition function).

also still getting this error when trying to import the transition preprocessor into svelte.config.js:

[WebServer] error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/tristanholaday/repos/UnicornUI/website/CustomPreprocessors/TransitionPreprocessor' imported from /Users/tristanholaday/repos/UnicornUI/website/svelte.config.js
    at new NodeError (node:internal/errors:400:5)
    at finalizeResolution (node:internal/modules/esm/resolve:326:11)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:842:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
[WebServer] npm ERR! Lifecycle script `build` failed with error: 
[WebServer] npm[WebServer]  ERR! Error: command failed 
[WebServer] npm ERR! [WebServer]   in workspace: [email protected] 
[WebServer] npm ERR!   at location: /Users/tristanholaday/repos/UnicornUI/website[WebServer]  
Error: Process from config.webServer was not able to start. Exit code: 1

TristanHoladay · 2023-07-10T14:56:06Z

update:

after looking more thoroughly at the svelte source code it looks like we could use their exported runtime transitions / animation functions (i.e. create_bidirectional_transition()) to create and add the animation to the stylesheet of the component.

runtime transition functions

animation rule functions

Latest push has a somewhat hardcoded example of doing this with route test (/test/+page.svelte) and it works! If this is a desirable route, then we'll need to of course handle all the edge cases, recursion, etc...

… create_bidirectional_transition() in an onMount() -- right now it is working for the div in test +page.svelte but not for <Box>.

…of Box in test +page.svelte.

…lte internal import; updating TransitionPreprocessor class and tests.

website/custom-preprocessor/transition-preprocessor.ts

…too existing onMount() or creating new one as well as adding a generic import for svelte/internal; added these to the setup in svelte.config.js for testing.

website/custom-preprocessor/transition-preprocessor.ts

website/svelte.config.js

…, also added directly to svelte.config.js for testing with routes/test/+page.svelte -- now looks for ref and creates/binds if not found.

… components with transition directives.

…ach transition.

#227 -- initial commit of proof of concept work; still a mess and run…

5bb9611

…ning into lots of errors with importing a custom preprocessor into the svelt.config.js as well as getting things to play nicely with the svelte for vs code extension.

TristanHoladay linked an issue Jun 27, 2023 that may be closed by this pull request

Explore Supporting transitions. #227

Open

#227 -- changed transitionPreprocessor into a class (though might not…

115b32b

… work for passing to the preprocessor group [] in svelte.config.js); made adjustments to the preprocessor currently in svelte.config.js.

TristanHoladay added 3 commits July 10, 2023 09:31

#227 -- updated svelte.config.js transitionPreprocessor() to write in…

b938b01

… create_bidirectional_transition() in an onMount() -- right now it is working for the div in test +page.svelte but not for <Box>.

#227 -- fixed applying transition to custom component by binding ref …

0e51861

…of Box in test +page.svelte.

#227 -- updated example of transition preprocessing using generic sve…

36f00bd

…lte internal import; updating TransitionPreprocessor class and tests.

github-advanced-security bot found potential problems Jul 11, 2023

View reviewed changes

website/custom-preprocessor/transition-preprocessor.ts Fixed Show fixed Hide fixed

#227 -- added helper functions to TransitionPreprocessor for writing …

5ab6b6c

…too existing onMount() or creating new one as well as adding a generic import for svelte/internal; added these to the setup in svelte.config.js for testing.

github-advanced-security bot found potential problems Jul 14, 2023

View reviewed changes

website/custom-preprocessor/transition-preprocessor.ts Fixed Show fixed Hide fixed

website/svelte.config.js Fixed Show fixed Hide fixed

TristanHoladay added 4 commits July 21, 2023 16:58

#227 -- adding use case handling to TransitionPreprocessor with tests…

3b3f42d

…, also added directly to svelte.config.js for testing with routes/test/+page.svelte -- now looks for ref and creates/binds if not found.

#227 - refactored TransitionPreprocessor to recursively handle custom…

1b172fe

… components with transition directives.

#227 - updated name of transition vars in onMounts to be unique for e…

57615b9

…ach transition.

#227 -- renamed process() to processRecursively() and added some TODOs.

27a8c06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#227 -- Support Transition Directive on Components #230

#227 -- Support Transition Directive on Components #230

TristanHoladay commented Jun 27, 2023 •

edited

Loading

netlify bot commented Jun 27, 2023 •

edited

Loading

TristanHoladay commented Jun 29, 2023 •

edited

Loading

TristanHoladay commented Jul 10, 2023 •

edited

Loading

#227 -- Support Transition Directive on Components #230

Are you sure you want to change the base?

#227 -- Support Transition Directive on Components #230

Conversation

TristanHoladay commented Jun 27, 2023 • edited Loading

netlify bot commented Jun 27, 2023 • edited Loading

✅ Deploy Preview for unicorn-ui ready!

TristanHoladay commented Jun 29, 2023 • edited Loading

TristanHoladay commented Jul 10, 2023 • edited Loading

TristanHoladay commented Jun 27, 2023 •

edited

Loading

netlify bot commented Jun 27, 2023 •

edited

Loading

TristanHoladay commented Jun 29, 2023 •

edited

Loading

TristanHoladay commented Jul 10, 2023 •

edited

Loading