google / closure-templates

A client- and server-side templating system that helps you dynamically build reusable HTML and UI elements
Apache License 2.0
637 stars 193 forks source link

Cannot read property 'assertType' of undefined when using soyutils.js on soy generated by compileToJsSrc #127

Open craph opened 7 years ago

craph commented 7 years ago

Take the following template :

/**
 * 
 */
{template .root}
    {@param convention: string}
    <!-- ko bindchildren: false -->
        <div class="shimTimePicker">{$convention}</div>
    <!-- /ko -->
{/template}

This template produce this JavaScript file output :

if (typeof eca == 'undefined') { var eca = {}; }
if (typeof eca.templates == 'undefined') { eca.templates = {}; }
if (typeof eca.templates.timepicker == 'undefined') { eca.templates.timepicker = {}; }

eca.templates.timepicker.root = function(opt_data, opt_ignored, opt_ijData) {
  soy.asserts.assertType(goog.isString(opt_data.convention) || (opt_data.convention instanceof goog.soy.data.SanitizedContent), 'convention', opt_data.convention, 'string|goog.soy.data.SanitizedContent');
  var convention = /** @type {string|goog.soy.data.SanitizedContent} */ (opt_data.convention);
  return soydata.VERY_UNSAFE.ordainSanitizedHtml('<!-- ko bindchildren: false --><div class="timepicker hidden' + ((convention != 'oc_na') ? ' notam' : '') + '" data-bind="css: {hidden: !visible()}"><div data-bind="foreach: times"><div class="row" data-bind="click:$parent.select, class:classes"><div class="container"><div class="time"><!-- ko ifnot: $parent.delcol() --><span data-bind="text:displayHour()"></span>:<span data-bind="text:displayMinute()"></span>&nbsp;<span data-bind="text:ampm"></span><!-- /ko --><!-- ko if: $parent.delcol() --><span data-bind="text: delcolTimeSlotDisplay"></span><!-- /ko --></div><div class="info" data-bind="text:info"></div><div class="spacer"></div></div></div></div></div><div class="shimTimePicker"></div><!-- /ko -->');
};
if (goog.DEBUG) {
  eca.templates.timepicker.root.soyTemplateName = 'eca.templates.timepicker.root';
}

But I am getting this error : Cannot read property 'assertType' of undefined

I am using the soy-2016-08-25 Maven dependency and the latest version of closure-templates-for-javascript via :

soyutils.js

In soyutils.js I cannot find this function : soy.asserts.assertType(...)

Also I am using jQuery 1.7.2 and latest version of KnockoutJS.

Please could you help me with this ? What I am doing wrong ?

Remarks : I am trying to move from the first version of closure template '1.0' to the latest. I have no errors in my Java side.

On the Java side, here is my code to generate Js from Soy File :

final SoyFileSet soyFileSet = SoyFileSet.builder().add(preparedContent, resource.getName()).add(commonPrepared, common.getName()).build();
if ("soy".equals(type)) {
    tofus.put(tofuKey, new SoyTofuOrJavaScript(soyFileSet.compileToTofu()));
} else if ("js".equals(type)) {
    final SoyJsSrcOptions jsOpt = new SoyJsSrcOptions();
    tofus.put(tofuKey, new SoyTofuOrJavaScript(Joiner.on(';').join(soyFileSet.compileToJsSrc(jsOpt, null))));
}

And to render it :

if (Arrays.asList(NEED_CONTENTKIND_JS).contains(templateName)) {
    return renderer.setData(data).setContentKind(ContentKind.JS).render();
} else {
    return renderer.setData(data).render();
}

Thank you very much. Best regards.

lukesandberg commented 7 years ago

This must mean that your version of soyutils is out of date. Maybe you have multiple versions floating around? On Thu, Mar 9, 2017 at 4:55 PM craph notifications@github.com wrote:

Take the following template :

/* */ {template .root} {@param convention: string}

  <div class="shimTimePicker">{$convention}</div>

{/template}

This template produce this JavaScript file output :

if (typeof eca == 'undefined') { var eca = {}; }if (typeof eca.templates == 'undefined') { eca.templates = {}; }if (typeof eca.templates.timepicker == 'undefined') { eca.templates.timepicker = {}; } eca.templates.timepicker.root = function(opt_data, opt_ignored, opt_ijData) { soy.asserts.assertType(goog.isString(opt_data.convention) || (opt_data.convention instanceof goog.soy.data.SanitizedContent), 'convention', opt_data.convention, 'string|goog.soy.data.SanitizedContent'); var convention = /* @type {string|goog.soy.data.SanitizedContent} / (opt_data.convention); return soydata.VERY_UNSAFE.ordainSanitizedHtml('

: 
'); };if (goog.DEBUG) { eca.templates.timepicker.root.soyTemplateName = 'eca.templates.timepicker.root'; }

But I am getting this error : Cannot read property 'assertType' of undefined

I am using the latest version of the Maven dependency and the latest version of closure-templates-for-javascript via :

soyutils.js

In soyutils.js I cannot find this function : soy.asserts.assertType(...)

Also I am using jQuery 1.7.2 and latest version of KnockoutJS.

Please could you help me with this ? What I am doing wrong ?

Remarks : I am trying to move from the first version of closure template '1.0' to the latest. I have no errors in my Java side.

On the Java side, here is my code to generate Js from Soy File :

final SoyFileSet soyFileSet = SoyFileSet.builder().add(preparedContent, resource.getName()).add(commonPrepared, common.getName()).build();if ("soy".equals(type)) { tofus.put(tofuKey, new SoyTofuOrJavaScript(soyFileSet.compileToTofu())); } else if ("js".equals(type)) { final SoyJsSrcOptions jsOpt = new SoyJsSrcOptions(); tofus.put(tofuKey, new SoyTofuOrJavaScript(Joiner.on(';').join(soyFileSet.compileToJsSrc(jsOpt, null)))); }

And to render it :

if (Arrays.asList(NEED_CONTENTKIND_JS).contains(templateName)) { return renderer.setData(data).setContentKind(ContentKind.JS).render(); } else { return renderer.setData(data).render(); }

Thank you very much. Best regards.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/google/closure-templates/issues/127, or mute the thread https://github.com/notifications/unsubscribe-auth/AAM03PtszyyAAyx03tTOFG58IjgbOFjeks5rkHVcgaJpZM4MYr2m .

craph commented 7 years ago

I have only one version of soyutils.

I have downloaded this version here : Closure Template Doc

Where can I found the latest version of soyutils ???

lukesandberg commented 7 years ago

The GitHub repo has the _usegoog version which is up to date. I forget exactly how we publish the version without closure.... perhaps there is a mvn build for it. The version on the developers site is out of date.

On Fri, Mar 10, 2017 at 8:28 AM craph notifications@github.com wrote:

I have only one version of soyutils.

I have downloaded this version here : https://developers.google.com/closure/templates/docs/helloworld_js http://url

Where can I found the latest version of soyutils ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/google/closure-templates/issues/127#issuecomment-285668832, or mute the thread https://github.com/notifications/unsubscribe-auth/AAM03EZsfsGfMWfjf_5tK8yzLUDzUtjQks5rkVAOgaJpZM4MYr2m .

craph commented 7 years ago

Could you have a look to provide us the correct soyutil.js ? or give me the correct way to have it ? Without this soyutils.js I can't use <param_type> like string and others I only can use "?" as param_type

As mentionned in the developper site, the soyutils_usegoog.js is required when using closure library. But in my case, I am not using closure library.

craph commented 7 years ago

In simple-usage.html in this repo you it's mention to use soyutils.js <script type="text/javascript" src="../soyutils.js"></script> But I can't find this file on the repo

lukesandberg commented 7 years ago

@mikesamuel do you know how the soyutils.js publishing works?

@craph the file is generated by combining the js files in this directory: https://github.com/google/closure-templates/tree/master/javascript into a final single file

craph commented 7 years ago

@lukesandberg What is the best way to use closure template in Javascript ? is it by using soyutils_usegoog.js ?

In my case, I think is by using soyutils.js because I am not using closure library.

Is it possible to have the developper site up-to-date too ?

craph commented 7 years ago

@lukesandberg have you found any way to generate soyutils.js ?

I have checked the pom but nothing about this file.

How is it possible because the developer site talks about soyutils.js ?

craph commented 7 years ago

@lukesandberg , @mikesamuel , I think the reason why soyutils.js is missing is because of these commits : Deprecate soyutils.js and recommend the _usegoog version. and Remove the non-Closure version of Soyutils.

But could you explain and update the documentation on how to use the _usegoog version and which files of closure library should be included in project to have all working nicely ?

mikesamuel commented 7 years ago

Sorry to take so long to weigh in on this thread.

closurebuilder.py should let you build a master JS file with the JS files in closure_templates/javascript/*.js.

I haven't tested this, but something like

closure_library> closure/bin/build/closurebuilder.py -o script --output=/tmp/soyutils.js \
  --root closure \
  -i ../closure_templates/javascript/soyutils_usegoog.js \
  -i ../closure_templates/javascript/soydata_converters.js \
  -i ../closure_templates/javascript/jspb_conversions.js

should work assuming you've got a local clone of closure_library and closure_templates. If you're using idom, you'd need -i ../closure_tempaltes/javascript/soyutils_idom.js.

We could probably provide these bundles as part of the release.

craph commented 7 years ago

@mikesamuel I don't have a clone of closure_library and closure_template on local.

Moreover, the link you provide return "not found" and point to this url : https://github.com/google/closure-templates/issues/closurebuilder.py

As mention in my previous comment, I think the reason why soyutils.js is missing is because of these commits : Deprecate soyutils.js and recommend the _usegoog version. and Remove the non-Closure version of Soyutils.

So to use closure_templates in the right way could you explain and update the documentation on how to use the _usegoog version and which files of closure library should be included in project to have all working nicely ?

I have created an issue for that #129

Many thanks

mikesamuel commented 7 years ago

@craph , Sorry. Fixed the link. I'll learn to markdown one of these days.

craph commented 7 years ago

@mikesamuel , I am waiting your explanations on this issue #129 about how to use _usegoog version because soyutils.js is the deprecated one version as mention here : Deprecate soyutils.js and recommend the _usegoog version. and Remove the non-Closure version of Soyutils.

I will be very happy to use closure-template in Javascript in the best way by using _usegoog 👍

Pending corrections about documentation and examples I will try to generate soyutils.js but I have to install Python and clone the two repo but I don"t have any time to do that...

craph commented 7 years ago

@mikesamuel @lukesandberg , I have tried to generate soyutils.js with python but I didn"t succeed.

Please could you give us the right way to use _usegoog version and document this in #129 .

My team and I are waiting about it because we have many constraints to use the latest version of closure-template with others library in our project.

Many thanks

craph commented 7 years ago

@mikesamuel @lukesandberg ,

Please could you give us the right way to use soyutils_usegoog.js version and document this in #129 .

Which files of closure-library must be used to use closure-template in JavaScript ?

My team and I are waiting about it because we have many constraints to use the latest version of closure-template with others library in our project.

Many thanks

craph commented 7 years ago

@mikesamuel @lukesandberg ,

Please could you give us the right way to use soyutils_usegoog.js version and document this in #129 .

Which files of closure-library must be used to use closure-template in JavaScript ?

My team and I are waiting about it because we have many constraints to use the latest version of closure-template with others library in our project.

Many thanks

craph commented 7 years ago

Hi @mikesamuel , @lukesandberg

My Team and I are waiting for an explanation on how to use the soyutils_usegoog.js and our project is still blocked because of that.

So please could you have a look and tell us the correct way asap ?

I have wrote a new issue #132 to explain that javascript in this github repo and documentation on developer site are not up-to-date.

In advance, many thanks for your help.

Best regards

craph commented 7 years ago

Hi @mikesamuel , @lukesandberg

Any updates would be very appreciated.

Thanks!

craph commented 7 years ago

Hi @lukesandberg, @mikesamuel, @fenghaolw Any updates would be very appreciated.

Thank you very much!

craph commented 7 years ago

Hi @lukesandberg, @mikesamuel, @fenghaolw,

Sorry for all my comments but can we have the visibility about this issue because my team and I and our projects are still blocked because the documentation and examples in this Github repo doesn't explain the right way on how to use closure template in Javascript with soyutils_usegoog.js.

Can you explain what is the Javascript files of "closure library" we must includes to be able to use soyutils_usegoog.js ?!

Thank you very much!

Best regards.

craph commented 7 years ago

Any news please ?

Can you explain what is the Javascript files of "closure library" we must includes to be able to use soyutils_usegoog.js ?!

Thank you very much!

Best regards.

tntim96 commented 7 years ago

Hi @mikesamuel ,

I got the following when I ran your example:

closurebuilder.py: error: ambiguous option: --output (--output_file, --output_mode?)

Swapping output to output_file gave:

closure/bin/build/closurebuilder.py: Scanning paths...
closure/bin/build/closurebuilder.py: 1553 sources scanned.
closure/bin/build/closurebuilder.py: Building dependency tree..
Traceback (most recent call last):
  File "closure/bin/build/closurebuilder.py", line 293, in <module>
    main()
  File "closure/bin/build/closurebuilder.py", line 229, in main
    tree = depstree.DepsTree(sources)
  File "/home/tim/dev/closure-library/closure/bin/build/depstree.py", line 56, in __init__
    raise NamespaceNotFoundError(require, source)
depstree.NamespaceNotFoundError: Namespace "goog.async.Deferred" never provided. Required in PathSource closure/goog/db/index.js

However, I did build a working JS file with the following:

closure/bin/build/closurebuilder.py --namespace=soy -o script --output_file=../closure-templates/soyutils-built.js \
  closure/goog/base.js \
  closure/goog/array/array.js \
  closure/goog/asserts/asserts.js \
  closure/goog/debug/debug.js \
  closure/goog/debug/error.js \
  closure/goog/dom/asserts.js \
  closure/goog/dom/browserfeature.js \
  closure/goog/dom/dom.js \
  closure/goog/dom/htmlelement.js \
  closure/goog/dom/nodetype.js \
  closure/goog/dom/safe.js \
  closure/goog/dom/tagname.js \
  closure/goog/dom/tags.js \
  closure/goog/format/format.js \
  closure/goog/fs/url.js \
  closure/goog/functions/functions.js \
  closure/goog/html/legacyconversions.js \
  closure/goog/html/safehtml.js \
  closure/goog/html/safescript.js \
  closure/goog/html/safestyle.js \
  closure/goog/html/safestylesheet.js \
  closure/goog/html/safeurl.js \
  closure/goog/html/trustedresourceurl.js \
  closure/goog/html/uncheckedconversions.js \
  closure/goog/i18n/bidi.js \
  closure/goog/i18n/bidiformatter.js \
  closure/goog/i18n/graphemebreak.js \
  closure/goog/iter/iter.js \
  closure/goog/labs/useragent/browser.js \
  closure/goog/labs/useragent/engine.js \
  closure/goog/labs/useragent/platform.js \
  closure/goog/labs/useragent/util.js \
  closure/goog/object/object.js \
  closure/goog/math/coordinate.js \
  closure/goog/math/math.js \
  closure/goog/math/size.js \
  closure/goog/reflect/reflect.js \
  closure/goog/soy/data.js \
  closure/goog/soy/soy.js \
  closure/goog/string/const.js \
  closure/goog/string/string.js \
  closure/goog/string/stringbuffer.js \
  closure/goog/string/typedstring.js \
  closure/goog/structs/inversionmap.js \
  closure/goog/structs/structs.js \
  closure/goog/structs/map.js \
  closure/goog/uri/uri.js \
  closure/goog/uri/utils.js \
  closure/goog/useragent/useragent.js \
  ../closure-templates/javascript/soyutils_usegoog.js

...and in the resulting file set goog.global.CLOSURE_NO_DEPS = true;

I do have some questions though @mikesamuel :

  1. Does this look right to you?
  2. Do the script errors from your script make sense to you?
  3. Can you comment on the difference in my script and yours? I found I had to explicitly list the files to get it to work.
  4. What versions of closure-templates and closure-library are compatible and are there git tags for these versions.
  5. Is there a closure builder option so I don't manually have to set goog.global.CLOSURE_NO_DEPS = true;
  6. Are there instructions coming with this commit that I should wait for?

Thanks.