feat: angular integration

[nartc]

This PR adds neodrag integration with Angular

• NeoDraggable directive
• Documentations updated with Angular

Would love some help to set up changesets for publishing.

Closes #106

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8bf5d7f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
neodrag	❌ Failed (Inspect)			Dec 20, 2023 8:06am

[vercel]

@nartc is attempting to deploy a commit to the Purus Projects Team on Vercel.

A member of the Team first needs to authorize it.

[trungvose]

Here are the steps to run the test locally and the final result:

1. Start by running pnpm install on the root directory. Make sure you are using pnpm version 8. ℹ️ Note: Initially, I encountered an issue because I was using pnpm version 7. Here is a screenshot of the error:

2. After installing the dependencies, still on the root directory, run npx nx compile @neodrag/angular. If everything is successful, you should see a similar output as shown in the screenshot.

3. Run pnpm install again to ensure that @neodrag/angular is installed in the demo project.

4. Now navigate to the packages/angular/demo directory and run npm start. There are two possible scenarios that can occur, and both @nartc and I are investigating the cause.

   4.1 ✅ Everything works fine, and you should see the expected output as shown in my screenshot.

   4.2 ❌ The Angular dev server runs successfully, but you encounter an error in the browser console. To resolve this issue, go back to the root folder, delete the node_modules and pnpm-lock files, and then run pnpm install again. For some reason, when running pnpm install, [email protected] gets installed, but if we remove the pnpm-lock file, [email protected] is installed instead.

I hope this helps! Let me know if you have any further questions.

[nartc]

@PuruVJ is there a strategy you have in mind for including the angular integration now in terms of release version/changeset?

[PuruVJ]

It's a bit tricky. it should go out as 0.x release first. Then as it gains more attractions within a month, releasing 2.0.0 feels fine. I know skipping over 1.0.0 is weird, but I dont think angular users would mind, considering the whole thing with skipping angular 3 and updating other deps directly v4 as well.

I haven't given this much time yet. It seems the docs site is also breaking due to old version of something and that'll need fixing before this can be merged. I'm on a bit of a limited bandwidth for next few days due to some urgent bugs in svelte REPL and sites. Once that's done, I'll give this PR a full review along with updated docs site.

[sheikalthaf]

@PuruVJ can you please look into this PR and merge it. I'm waiting for this support

[PuruVJ]

Hi! I am able to work on this finally!!

Thanks a lot for this @nartc. Ill be going through the changes and asking questions to understand it. However, I dont really understand angular deeply, so I'll be going forward with the assumption that you took care of the edge cases. I have full confidence in you, considering your background and experience 🔥😁

Once again, thanks a lot for this!

[PuruVJ]

I have one question: Is ng-packagr necessary? Can't we compile the decorators down to their plain JS version with tsup and ship it?

[nartc]

I'll check it out later today. Thanks @PuruVJ for taking a look.

[nartc]

@PuruVJ I've updated the PR. There are some changes that I want to point out:

• Can we go with TypeScript 5.2 at the moment? The Angular Compiler has yet to support 5.3 (it should be soon). To answer your question about ng-packagr, it is required because Angular decorators aren't just TypeScript decorators. Those decorators will be compiled away using the Angular Compiler into Angular Instructions (template instructions)
• Angular Library is not minified as the Angular Team encourages folks to only minify at the application level (where the library is consumed). This makes the Angular size look huge on the docs

[PuruVJ]

Re: minification - Other versions also ship unminified version, but the sizes are calculated from dist/min/index.js, which is minified, but isn't used directly, unless someone explicitly uses its path.

Is it possible to have that for Angular integration too? Just for reporting the size?

[nartc]

@PuruVJ, It is possible to run a script to minify Angular's output, but it wouldn't seem fair either since the other min/index.js seem to have @neodrag/core bundled while the Angular one does not bundle its dependencies.

[PuruVJ]

Wait what?! That doesn't seem right. @neodrag/core's functionality should be bundled inside the package. Is that possible?

[nartc]

It shouldn't since Angular bundles external packages and optimizes them for end users. Libraries' dependencies are either implicit deps (e:g: dependencies) or explicit peer deps. All Angular libs are built this way. Angular Team ensures libs built with Angular Package Format to work properly for end users.

[PuruVJ]

Aha!

Is it possible to make a separate minified file with decorators intact, but entirety of @neodrag/core included, and then minified? I'd still like the users to get an idea of how big this is gonna be

[nartc]

I can figure something out