Skip to content

Conversation

Skumring
Copy link
Contributor

@Skumring Skumring commented Jun 6, 2022

This PR adds support to use this repo as an NPM/Yarn package so we can use it with Webpacker or any other assets bundler.
I implemented this so it uses the same source files as the Rails gem so any change in the JS and CSS is available in both cases. I didn't change the Rails gem-related code this same repo can be used in both ways. The separate entry point searchable_select_pack.js is needed to support the import (ES6 syntax).

After pack&publish NPM module has minimum files and should look like:
NPM package

How you can test the package locally before merge&publish:

  1. Fetch the current branch on your local machine;
  2. Open package.json and replace in scripts sections prepublishOnly on prepack;
  3. Execute in console npm pack (you should have installed Node.js)
  4. Follow to target project where you want to use current gem (gem should be already installed) with assets from package and execute: yarn add /path-to-local-project-repository/activeadmin-searchable_select, where path-to-local-project-repository is full path in your system (example: /Users/username/workspace/activeadmin-searchable_select), or relative path (example: ../activeadmin-searchable_select);
  5. Add the following line import '@codevise/activeadmin-searchable_select' into app/assets/javascripts/active_admin.js or any other entry point file for javascripts in your project.
  6. Add the following line @import '@codevise/activeadmin-searchable_select'; into app/assets/stylesheets/active_admin.scss or any other entry point file for stylesheets in your project.
  7. Make sure about assets via Sprockets is not enabled (//= require active_admin/searchable_select etc..);
  8. To remove package execute yarn remove @codevise/activeadmin-searchable_select.

After the PR is merged, you can run npm publish --access public (Instruction) from master branch to publish scoped NPM package on the https://www.npmjs.com/, or I can do it myself.

Resolve #35

@tf tf added this to the v1.6 milestone Jun 7, 2022
@tf tf merged commit 1f5179c into codevise:master Jun 7, 2022
@Skumring Skumring deleted the add-npm-module-support branch June 7, 2022 07:05
@tf
Copy link
Member

tf commented Jun 7, 2022

Thanks for settings this up! Package is published now: https://www.npmjs.com/package/@codevise/activeadmin-searchable_select.

@Skumring
Copy link
Contributor Author

Skumring commented Jun 7, 2022

@tf looks like while publishing package something went wrong, package should have 6 files and next structure:
NPM package

at current time on npmjs.com I see 7 files in package:
npmjs

when I install the package I see the next structure in node_modules:
wrong_structure

file searchable_select.scss placed in active_admin folder - its wrong, it should be place directly in src folder together with searchable_select.js
when I go to the local repo activeadmin-searchable_select and execute npm pack or npm publish --access public from actual master branch, I see that the package is built with the correct structure:
correct

@tf please, can you republish the package with the current version - drop&publish again (available for first publishing within 24 hours). Or you can bump and publish minor version for example 1.6.1. Or notify me and I can do it myself if you invite me to codevise organization on https://www.npmjs.com/ and give me permission for that.

@tf
Copy link
Member

tf commented Jun 7, 2022

The prebulish script did not work as expected in bash. I fixed it and published 1.6.1.

@Skumring
Copy link
Contributor Author

Skumring commented Jun 7, 2022

The prebulish script did not work as expected in bash. I fixed it and published 1.6.1.

Nice! Thank you very much!

glebtv pushed a commit to rs-pro/activeadmin-tom_select that referenced this pull request Aug 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Searchable select with webpacker

2 participants