[Feature] UMD distribution files

romelperez commented 2 years ago

Is your feature request related to a problem? Please describe. I want to be able to consume motion in UMD format with a CDN such as unpkg.

Describe the solution you'd like There can be a single production UMD bundle JavaScript file released in the package distribution files. This could be done with a builder like esbuild with input file src/index.ts and output dist/motion.umd.js.

Describe alternatives you've considered None.

Additional context None.

I can send a PR with the features if needed.

Thank you for your contributions 💙 !

volkandkaya commented 1 year ago

This would be a great addition.

I'm currently working on a static site website builder and there is no "npm" to run. So this package is unusable for my customers at the moment.

romelperez commented 1 year ago

Hello @mattgperry ! If it is okay, I can contribute to this one. I would like a confirmation and possibly guidance before I work on it. Thank you!

nam-co commented 10 months ago

Hello, was this ever implemented?

alexboots commented 5 months ago

I see a UMD version here: https://unpkg.com/browse/motion@10.17.0/dist/

Is that what is being asked for here?

edit: This example here mentinos how to use the esm version: https://github.com/motiondivision/motionone/issues/168#issuecomment-1925888814

And you can use the .min.js version like so:

<html>
  <head>
    <script src="https://unpkg.com/motion@10.17.0/dist/motion.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
        const boxes = document.querySelectorAll(".box")
        Motion.animate(
          boxes,
          { x: 200 },
          {
            delay: Motion.stagger(0.1),
            duration: 0.5,
            easing: [.22, .03, .26, 1]
          }
        );
      });
    </script>
    <style>
    .box {
        height: 30px;
        width: 30px;
        background: orangered;
      }
    </style>
  </head>
  <body>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
    <div class="box">
      hi
    </div>
  </body>
</html>

motiondivision / motionone

[Feature] UMD distribution files #114