Giter Club home page Giter Club logo

html-import-template-loader's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. ๐Ÿ˜‰

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

html-import-template-loader's People

Contributors

bnavetta avatar eisenbergeffect avatar strahilkazlachev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

html-import-template-loader's Issues

Error installing with jspm

I'm trying to install this package using jspm and I get the following error:

err Installing npm:[email protected], no version match for npm:webcomponentsjs@webcomponents%2Fwebcomponentsjs

I'm no expert at npm/jspm but I don't see any version requirement for the webcomponents package dependency.

Could you fix this?

Integration with Webpack is crashing

I'm developing an app with Aurelia, Polymer and Webpack. When running the application using Webpack, it seems that aurelia-html-import-template-loader is not able to find app.html...

GET http://localhost:3000/app.html 404 (Not Found)

I'm using aurelia-polymer plugin too and in webpack.config.js including html-import-template-loader as subModule to bundle the dependencies:

new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: "aurelia-html-import-template-loader" }
      ]
})

In main.ts I'm atttaching the plugins and setting app as root:

aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css')
    .plugin('aurelia-polymer')
    .plugin('aurelia-html-import-template-loader');
aurelia.start().then(() => aurelia.setRoot('app', document.body));

Anyone with the same problem?

[Suggestion] Rename plugin

This is just a suggestion, but why not rename this plugin to "importer". The current name is a mouthful.

Problem installing

I tried to install aurelia html import template loader. It works for me up until version 1.2.2 but all versions after that show this error:

problem

I have also tried jspm cc and then install, doesn't change anything.
I can install all other aurelia packages, just have a problem with this one.

Thanks in advance.

doc is not defined

After running the bundler with the html import template loader I am receiving the error:

Unhandled promise rejection Error: doc is not defined
    Error loading http://localhost/export/jspm_packages/npm/[email protected]/ai-dialog.html!template-registry-entry

This is not specific to aurelia-dialog. I first ran into this error using aurelia-bs-modal and converted to aurelia-dialog thinking it was because aurelia-bs-modal was deprecated. It seems now that this error comes from any plugin that has an html file loaded using !template-registry-entry

It looks like this error is coming from here: https://github.com/aurelia/html-import-template-loader/blob/master/src/html-import-template-loader.js#L46.

this.onBundleReady = this._importBundle(bundleLink).then(doc => {
     return this._normalizeTemplateIds(loader, doc);
}).then(() => {
     this.bundle = doc;
     this.onBundleReady = null;
});

It looks like the import bundle method here was split into 2 callbacks. The second callback on line 49 does not have scope to the doc variable defined in the arrow function of the first callback. According to the release this was changed to support the normalize API, which I am not familiar with so I am not sure how this needs to be corrected.

can it be used to load aurelia plugin HTML files?

I wrote aurelia plugins which have html files. During bundle, I tried to bundle every dist/.html and my-aurelia-plugins/__/.html but I always received failed load plugin html files. Is this a bug? or html-import-template-loader just loads dist/*.html ONLY?

Thanks,

Error msg:
GET http://localhost:9000/jspm_packages/emrsn/slin/[email protected]/emrsn-panel.html 404 (Not Found)A @ system.js:4(anonymous function) @ system.js:4y @ app-bundle.js:55(anonymous function) @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4i @ app-bundle.js:55(anonymous function) @ app-bundle.js:55n @ app-bundle.js:55
system.js:4 GET http://localhost:9000/jspm_packages/emrsn/rchen/[email protected]/emrsn-alarm-button.html 404 (Not Found)A @ system.js:4(anonymous function) @ system.js:4y @ app-bundle.js:55(anonymous function) @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4i @ app-bundle.js:55(anonymous function) @ app-bundle.js:55n @ app-bundle.js:55

Bundle code:

var config = {
  force: true,
  packagePath: '.',   
  bundles: {
    'dist/app-bundle': {
        includes: [
        '[**/*]',
         "aurelia-framework",
        'aurelia-bootstrapper',
        "aurelia-router",
        'aurelia-templating-resources',
        'aurelia-templating-binding',
        'aurelia-templating-router',
        'aurelia-loader-default',
        'aurelia-history-browser',
        'aurelia-logging-console',
        'aurelia-loader',
        'aurelia-html-import-template-loader',
        'aurelia-flux',
        'aurelia-dialog',
        'aurelia-i18n',
        'iscroll',
        'jquery',
        'moment',
        'text'       
      ].concat(deps),
      options: {
        inject: false,
        minify: true
      }
      },
    "dist/view-bundle": {
      htmlimport: true,
      includes: ['dist/**/*.html','jspm_packages/emrsn/**/*.html'],
      options: {
        inject: {
          indexFile : 'index.html',
          destFile : 'dest_index.html',
        }
      }
  }
  }
};

Does not have the path in the latest version

I was using this to support custom file names for my views and view models.

Basically If I had the following file names:

  • widget.ts
  • widget.html

I could use this library so that I could have the following file names instead:

  • widget-vm.ts
  • widget-view.html

This is useful if I have an entity called widget.ts that stores what a widget is to my application.

I just upgraded from [email protected] to [email protected] and this code broke. The issue is that origin.moduleId used to be the path + file name + extension.

Now it is just file name. I don't really need the extension. But I need the path, unless I want to have all my file locations on the root ๐Ÿ‘Ž

I can roll back, but I am hopping for a non-breaking version in a future release.

Here is my code that I was using:

// Setup view -> viewModel relationship to support value-view.htm and value-vm.ts
ViewLocator.prototype.convertOriginToViewUrl = (origin) => {
    let moduleId = origin.moduleId;

    // remove the file extension
    //moduleId = moduleId.substring(0, moduleId.lastIndexOf('.'));

    // see if the module ends in 'Vm'
    if (moduleId.endsWith('-vm')) {
        var coreName = moduleId.substring(0, moduleId.length - 3);
        return coreName + '-view.html';
    }
    else {
        return moduleId + '.html';
    }
};

I ran this in the main.ts between the call to aurelia.use and aurelia.start.

Loader causes Aurelia to NOT find HTML templates in bundle

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    OSX 10.x

  • Node Version:
    6.3.1

  • NPM Version:
    3.9.5

  • JSPM OR Webpack AND Version
    JSPM 0.16.44

  • Browser:
    Chrome

  • Language:
    ESNext

Current behavior:
Using this plugin with the skeleton-navigation/skeleton-esnext/ breaks when the project is exported. Aurelia templates are not found in the bundle. Copying all *.html templates into the export/dist folder "fixes" the app.

Expected/desired behavior:

  • What is the expected behavior?
    The loader looks for HTML first in the bundle and then loads HTML imports to support polymer components. If this is not the expected behavior and HTML files are required on the server, then that should be in the documentation.
  • What is the motivation / use case for changing the behavior?
    Fewer HTTP requests

Plugin not working with standard aurelia-cli setup

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    Windows 10
  • Node Version:
    6.3.0
  • NPM Version:
    3.10.3
  • Browser:
    Chrome
  • Language:
    ESNext

Current behavior:
Plugin not working. View not loading. Error in the browser's console:

vendor-bundle.js:21513 GET http://localhost:9000/app.html 
Unhandled rejection Error: Load timeout for modules: template-registry- โ€ฆโ€ฆโ€ฆ

This user has the exact same issue: http://stackoverflow.com/questions/39127810/aurelia-polymer-using-cli-tool

Is SystemJS a requirement?

Bower support

This package doesn't appear to be available on Bower whereas the other Aurelia packages are. Will Bower support be added?

Problem the bundle file in loading the cross domain

when the view-bundle are on domain1.com/dist/view-bundle.html
and accessing the app in domain2.com. it will give an file error HTMLImports.min 404.

it's working on chrome browser. But not on Mozilla or Edge.

Polymer elements appear to not work when bundled

My views depend on Polymer Paper Elements. I got this working by following this guide. When I try to bundle my views and the Polymer Paper Elements that they depend on by following this guide, the Polymer Paper Elements are not included and thus the bundled app does not work.

I have put together a repo that reproduces the problem. It's a fork of aurelia/skeleton-navigation with only the minimal changes needed to reproduce the problem.

Using this repo that reproduces the problem navigate to the skeleton-es2016 directory and run:

npm install
jspm install
bower install
gulp bundle
// Serve the files. I like to use the npm package "http-server"

Navigate to /index.html and observe that on the welcome view, Polymer Paper Elements are working.
Navigate to /dest_index.html and observe that the Polymer Paper Elements are not working.

Why should I use this plugin

Hi,
I'm a bit confused about what this plugin serves for. Firstly, I thought that I should use this plugin in order to being able to use polymer widgets in my app, but I can use polymer without html-import-template-loader. Then I thought it would allow to bundle polymer widget along with my aurelia views and widgets without the need to use vulcanize but as said in issue 11 vulcanize is still required to bundle polymer.
At this point, I don't know why should I use this plugin, is there any performance gain by importing html views when using polymer?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.