Using Semantic UI in Meteor Package

zachariahtimothy commented 8 years ago

What is the correct way to use the latest release of this package with Meteor 1.0.2? I use 2.1.4_2 previously and was able to get the site to generate but once I updated to 2.1.4_5 it broke and no matter which version I use I cannot get the package to generate the semantic files. I have used this plugin a couple times in Meteor apps and it works fine but there seems to be a lot of trouble using it within a package. Can a quick writeup be done to show how to best approach utilizing Semantic UI in Meteor packages? I have tried adding custom.semantic.json as an asset, file, client only, server only, both, etc all on both fronts. No errors are thrown it simply does nothing. Any tips would be massively appreciated!

flemay commented 8 years ago

@zachariahtimothy Have you tried to delete everything in /path/to/your/client/semantic/ except your custom.semantic.json file? This should regenerate everything!

I haven't tried it inside a package. It will be on my todo list. :)

Also, feedbacks are always welcome. if you have read the README and found sections that are not clear, please let us know! :)

zachariahtimothy commented 8 years ago

Yes I did try deleting everything! I even deleted the entire directory and started fresh.

Zach Curtis P: 970.590.6383 E: zachariahtimothy@gmail.com T: @zachariahCurtis https://twitter.com/#!/@zachariahCurtis

On Thu, Oct 8, 2015 at 3:27 PM, Frederic Lemay notifications@github.com wrote:

@zachariahtimothy https://github.com/zachariahtimothy Have you tried to delete everything in /path/to/your/client/semantic/ except your custom.semantic.json file? This should regenerate everything!

I haven't tried it inside a package. It will be on my todo list. :)

Also, feedbacks are always welcome. if you have read the README and found sections that are not clear, please let us know! :)

— Reply to this email directly or view it on GitHub https://github.com/Semantic-Org/Semantic-UI-Meteor/issues/68#issuecomment-146690941 .

JeremySaks commented 8 years ago

I'm also having problems getting 2.1.4_5 to respect the package structure of my app.

With 2.1.4_2 semantic built the file and folder structure correctly within the package, where custom.semantic.json is located.

After upgrade to 2.1.4_5, semantic builds files and folders to the root directory of the app regardless of where custom.semantic.json is located, and regardless of where I add semantic:ui (inside my package, inside another package which is listed as a dependency, or directly to the Meteor app).

Since this is a breaking change and I'm unable to stop it from building the directory structure to root on startup, I've reverted to 2.1.4_2.

Update - 2.1.4_3 works correctly inside a package as well, so I'm currently reverted to _3 not _2.

ciwolsey commented 8 years ago

I've had the same issue, and reverting as @jeremySaks describes fixes it for me.

flemay commented 8 years ago

@JeremySaks semantic:ui hasn't been tested within a package. it is on my todo list though. However, I need to verify if used outside of a package it still works.

JeremySaks commented 8 years ago

@flemay gotcha, that is useful to know. For what it's worth I've been using it from within a package without problems up through 2.1.4_3. A couple things I picked up along the way:

For hot code reloads to take effect on user changes to /site it's necessary to also api.addFiles() for them;
Removing empty scaffolding files from /site greatly improves rebuild times; it may or may not be related to meteor/meteor#5269

Maybe that will be useful to others. Thank you for all the effort on this package!

roelvan commented 8 years ago

@JeremySaks could you explain me the steps you took to use it within a package? I can't seem to get any version to work inside another package.

What I've done in my package.json file located in my app-ui package:

Package.onUse(function(api) {
  api.versionsFrom('1.2.1');
  api.use([
    'app-core@0.0.1',
    'react',
    'kadira:react-layout',
    'semantic:ui@2.1.4_3',
    'flemay:less-autoprefixer'
  ]);
  api.imply([
    'react',
    'semantic:ui@2.1.4_3'
  ]);
  api.addFiles([
    'components/main-layout.jsx',
    'semantic-ui/custom.semantic.json',
    'router.jsx'
  ], ['client']);
});

I also added an empty custom.semantic.json file to my packge and used the addFiles() function for it. It only generates a .custom.semantic.json in my root folder of my meteor project (not inside my package). And it does not generate any other necessary files at all.

I would love to seperate all my UI code inside a seperate package.

Thanks in advance!

JeremySaks commented 8 years ago

@roelvan see if it works with semantic:ui@=2.1.4_3 (note the equals sign) for both the api.use() and api.imply(). .meteor/versions will say if you are running a different version right now.

Otherwise my setup looks pretty similar. I do:

  api.addFiles([
    'custom.semantic.json',
    'semantic.less',
    'theme.config.import.less'
  ], 'client');

And from there it's following the steps outlined in the package readme, changing custom.semantic.json to trigger the directory creation, etc.

roelvan commented 8 years ago

Yes that did it! Thanks a lot for your help.

Roel Vaneyghen, Co-founder www.ralphstarck.com | www.klikkid.be | www.pixelfreaks.io | www.trouweninbeeld.be | www.lost.io

On 2 November 2015 at 12:40:12, Jeremy Saks (notifications@github.com) wrote:

@=2.1.4_3

luisherranz commented 8 years ago

Thanks for this! I made it work within a plugin with your instructions. It looks like last version working inside a package is 2.1.4_3. Current version (2.1.6) still doesn't.

space-alien commented 8 years ago

A big problem with SUI having to now live in the app root is that the SUI CSS is appended at the end of the merged CSS rather than the beginning. This is making it much harder to override the CSS with custom styles when the selector specificity is the same. Especially considering how many SUI properties are marked !important! It would be great to see SUI working within custom packages again.

timothyarmes commented 8 years ago

I've been trying to fix this in a fork, however it's essentially impossible. The new build system introduced in Meteor 1.2 doesn't provide compile plugins with the absolute path to the file being compiled (in this case the custom.semantic.json file).

Without that path we can't generate the new files anywhere other than the root. I tried to look into the internals of the build system to see if I could pull it out somewhere, but the only path I can actually get is to the server's copy of the build, and some of the paths are renamed so that doesn't help (for example, package folder names get changed from my-package to my_package).

However, there is some hope. We can get hold of the package-name of the current package (the one containing the custom.semantic.json), so one very hacky possibility would be could scan the packages folder, examine the package.js files and find the corresponding package. Then we'd have the path that we need.

This would only work for local packages, but that's fine. Nevertheless it's too hacky for me, and not convinced of the benefits are worth it.

SimonVuong commented 8 years ago

@roelvan

i followed the steps above but am receiving the following error.

TypeError: this.$(...).dropdown is not a function
at null.<anonymous> (AdminApplicationDropdownTemplate.js:2)

thoughts?

AdminApplicationDropdownTemplate.js

Template.AdminApplicationDropdown.onRendered(function() {
  this.$(".dropdown").dropdown();
});

package.js

Package.onUse(function(api) {
  api.versionsFrom('1.2.1');
  api.use('ecmascript');
  api.use('blaze-html-templates');
  api.use('semantic:ui@=2.1.4_3');
  api.use('flemay:less-autoprefixer');
  api.imply('semantic:ui@=2.1.4_3');

  api.addFiles('client/lib/semantic-ui/custom.semantic.json', 'client');
  api.addFiles('client/lib/semantic-ui/semantic.less', 'client');
  api.addFiles('client/lib/semantic-ui/theme.config.import.less', 'client');

  api.addFiles('client/templates/AdminApplicationDropdownTemplate.html', 'client');
  api.addFiles('client/templates/AdminApplicationDropdownTemplate.js', 'client');
  api.addFiles('client/Index.html', 'client');
});

SimonVuong commented 8 years ago

for what it's worth...

regular dropdown

<div class="ui compact menu">
  <div class="ui simple dropdown item">
    Dropdown
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Choice 1</div>
      <div class="item">Choice 2</div>
      <div class="item">Choice 3</div>
    </div>
  </div>
</div>

and menus

<div class="ui vertical menu">
  <div class="item">
    <div class="header">Products</div>
    <div class="menu">
      <a class="item">Enterprise</a>
      <a class="item">Consumer</a>
    </div>
  </div>
</div>

work just fine. none of the searchable dropdowns work.

SimonVuong commented 8 years ago

the solution:

need to manually add .js files to the package.js

api.addFiles('client/lib/semantic-ui/definitions/modules/dropdown.js', 'client');
api.addFiles('client/lib/semantic-ui/definitions/modules/transition.js', 'client');

Semantic-Org / Semantic-UI-Meteor

Using Semantic UI in Meteor Package #68